ok

app/(tabs)/_layout.tsx

@@ -0,0 +1,15 @@
+import { StatusBar, StyleSheet, Text, View } from "react-native";
+import React from "react";
+import { Stack } from "expo-router";
+
+const TabsLayout = () => {
+  return (
+    <Stack>
+      <Stack.Screen name="trips" options={{ headerShown: false }} />
+    </Stack>
+  );
+};
+
+export default TabsLayout;
+
+const styles = StyleSheet.create({});

app/(tabs)/stays/_layout.tsx

@@ -0,0 +1,12 @@
+import { Stack } from "expo-router";
+import { Button } from "react-native";
+import { Header } from "react-native/Libraries/NewAppScreen";
+
+export default function RootLayout() {
+  return (
+    <Stack>
+      <Stack.Screen name="stays" options={{ headerShown: false }} />
+      <Stack.Screen name="StayIndex" options={{ headerShown: false }} />
+    </Stack>
+  );
+}

app/TripDetails.tsx → app/(tabs)/trips/[Tripid].tsx

@@ -1,9 +1,14 @@
 import { Image, StyleSheet, Text, View } from "react-native";
 import React from "react";
 import trips from "@/data/trips";
+import { useLocalSearchParams } from "expo-router";
 
 const TripDetails = () => {
-  const trip = trips[0];
+  const { Tripid } = useLocalSearchParams();
+  const trip = trips.find((p) => p.id === Number(Tripid));
+  console.log(Tripid);
+  console.log(trip);
+
   return (
     <View style={styles.container}>
       <Text style={styles.title}>{trip?.name}</Text>

app/(tabs)/trips/_layout.tsx

@@ -0,0 +1,9 @@
+import { StyleSheet, Text, View } from "react-native";
+import React from "react";
+import { Stack } from "expo-router";
+
+export const TripsLayout = () => {
+  return <Stack></Stack>;
+};
+
+const styles = StyleSheet.create({});

app/_layout.tsx

@@ -1,9 +1,16 @@
-import { Stack } from "expo-router";
+import { StyleSheet, Text, View } from "react-native";
+import React from "react";
+import { Tabs } from "expo-router";
 
-export default function RootLayout() {
-  return <Stack />;
-}
-
-export const unstable_settings = {
-  initialRouteName: "index",
+const RootLayout = () => {
+  return (
+    <Tabs>
+      <Tabs.Screen name="index" options={{ title: "trips" }} />
+      <Tabs.Screen name="(tabs)" options={{ title: "stays" }} />
+    </Tabs>
+  );
 };
+
+export default RootLayout;
+
+const styles = StyleSheet.create({});

component/TripCard.tsx

@@ -1,5 +1,6 @@
 import { Image, StyleSheet, Text, View } from "react-native";
 import React from "react";
+import { Link, useLocalSearchParams } from "expo-router";
 
 interface TripCardProps {
   trip: {
@@ -17,9 +18,11 @@ interface TripCardProps {
 
 const TripCard = ({ trip }: TripCardProps) => {
   return (
-    <View style={styles.container}>
-      <Image source={{ uri: trip.img }} style={styles.image} />
-    </View>
+    <Link href={`/trips/${trip.id}`} asChild>
+      <View style={styles.container}>
+        <Image source={{ uri: trip.img }} style={styles.image} />
+      </View>
+    </Link>
   );
 };
 

tsconfig.json

@@ -3,15 +3,9 @@
   "compilerOptions": {
     "strict": true,
     "paths": {
-      "@/*": [
-        "./*"
-      ]
-    }
+      "@/*": ["./*"]
+    },
+    "jsx": "react-native"
   },
-  "include": [
-    "**/*.ts",
-    "**/*.tsx",
-    ".expo/types/**/*.ts",
-    "expo-env.d.ts"
-  ]
+  "include": ["**/*.ts", "**/*.tsx", ".expo/types/**/*.ts", "expo-env.d.ts"]
 }