done

app/(tabs)/_layout.tsx

@@ -0,0 +1,50 @@
+import { Tabs } from "expo-router";
+import { Ionicons } from "@expo/vector-icons";
+import { ReactNode } from "react";
+
+export default function TabLayout() {
+  return (
+    <Tabs
+      screenOptions={{
+        headerShown: false,
+        // ① Tell the tabs what colors to use for active vs inactive icons/text:
+        tabBarActiveTintColor: "black",
+        tabBarInactiveTintColor: "white",
+        tabBarStyle: {
+          backgroundColor: "#1abc9c",
+        },
+      }}
+    >
+      <Tabs.Screen
+        name="stays"
+        options={{
+          title: "Stays",
+          tabBarIcon: ({
+            color,
+            size,
+          }: {
+            focused: boolean;
+            color: string;
+            size: number;
+          }): ReactNode => <Ionicons name="home" size={size} color={color} />,
+        }}
+      />
+      <Tabs.Screen
+        name="trips"
+        options={{
+          title: "Trips",
+          tabBarIcon: ({
+            color,
+            size,
+          }: {
+            focused: boolean;
+            color: string;
+            size: number;
+          }): ReactNode => (
+            <Ionicons name="compass" size={size} color={color} />
+          ),
+        }}
+      />
+    </Tabs>
+  );
+}

app/Staydetails.tsx → app/(tabs)/stays/[id].tsx

@@ -1,9 +1,11 @@
 import { Image, StyleSheet, Text, View } from "react-native";
 import React from "react";
 import stays from "@/data/stays";
+import { useLocalSearchParams } from "expo-router";
 
 const StayDetails = () => {
-  const stay = stays[0];
+  const { id } = useLocalSearchParams();
+  const stay = stays.find((s) => s.id === Number(id));
   return (
     <View style={styles.container}>
       <Text style={styles.name}>{stay?.name}</Text>
@@ -24,6 +26,7 @@ const styles = StyleSheet.create({
     padding: 20,
     gap: 10,
     alignItems: "center",
+    justifyContent: "center",
   },
   image: {
     width: "100%",

app/(tabs)/stays/_layout.tsx

@@ -0,0 +1,17 @@
+import { Stack } from "expo-router";
+
+export default function StaysLayout() {
+  return (
+    <Stack
+      screenOptions={{
+        headerShown: true,
+        headerStyle: {
+          backgroundColor: "#1abc9c",
+        },
+      }}
+    >
+      <Stack.Screen name="index" options={{ title: "Hike" }} />
+      <Stack.Screen name="[id]" options={{ title: "Hike" }} />
+    </Stack>
+  );
+}

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

@@ -1,9 +1,11 @@
 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 { id } = useLocalSearchParams();
+  const trip = trips.find((s) => s.id === Number(id));
   return (
     <View style={styles.container}>
       <Text style={styles.title}>{trip?.name}</Text>
@@ -14,7 +16,6 @@ const TripDetails = () => {
         <Text style={styles.description}>Difficulty: {trip?.difficulty}</Text>
         <Text style={styles.description}>Rating: {trip?.rating}</Text>
       </View>
-
       <Text style={styles.description}>{trip?.details}</Text>
     </View>
   );
@@ -27,6 +28,7 @@ const styles = StyleSheet.create({
     padding: 10,
     backgroundColor: "white",
     flex: 1,
+    justifyContent: "center",
   },
   image: {
     width: "100%",

app/(tabs)/trips/_layout.tsx

@@ -0,0 +1,17 @@
+import { Stack } from "expo-router";
+
+export default function TripsLayout() {
+  return (
+    <Stack
+      screenOptions={{
+        headerShown: true,
+        headerStyle: {
+          backgroundColor: "#1abc9c",
+        },
+      }}
+    >
+      <Stack.Screen name="index" options={{ title: "Hike" }} />
+      <Stack.Screen name="[id]" options={{ title: "Hike" }} />
+    </Stack>
+  );
+}

app/(tabs)/trips/index.tsx

@@ -0,0 +1,69 @@
+import { StyleSheet, Text, View } from "react-native";
+import React, { useState } from "react";
+import TripDetails from "@/app/TripDetails";
+import TripList from "@/component/TripList";
+import trips from "@/data/trips";
+import Searchbar from "@/component/Searchbar";
+import Line from "@/component/Line";
+import DifficultyFilter from "@/component/DifficultyFilter";
+
+const TripsScreen = () => {
+  const [search, setSearch] = useState("");
+  const displayTrips = trips.filter((trip) =>
+    trip.name.toLowerCase().includes(search.toLowerCase())
+  );
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.text}>Explore Trips</Text>
+      <Searchbar setSearch={setSearch} />
+
+      <DifficultyFilter />
+
+      <View
+        style={{
+          flexDirection: "row",
+          gap: 10,
+          paddingLeft: 10,
+          paddingRight: 10,
+        }}
+      >
+        <Line width={"50%"} color="#1abc9c" />
+        <Line width={"50%"} color="#1abc9c" />
+      </View>
+      <TripList trips={displayTrips} />
+    </View>
+  );
+};
+
+export default TripsScreen;
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: "white",
+  },
+  text: {
+    fontSize: 20,
+    fontWeight: "bold",
+    textAlign: "center",
+    marginTop: 10,
+  },
+
+  line: {
+    borderWidth: 1,
+    borderColor: "white",
+    borderRadius: 10,
+    alignItems: "center",
+    backgroundColor: "white",
+    width: "90%",
+    height: 10,
+    marginTop: 20,
+  },
+  textContainer: {
+    padding: 20,
+    borderRadius: 10,
+    alignItems: "center",
+    backgroundColor: "white",
+  },
+});

app/_layout.tsx

@@ -1,7 +1,22 @@
 import { Stack } from "expo-router";
 
 export default function RootLayout() {
-  return <Stack />;
+  return (
+    <Stack
+      screenOptions={{
+        headerStyle: {
+          backgroundColor: "green",
+        },
+      }}
+    >
+      <Stack.Screen
+        name="(tabs)"
+        options={{
+          headerShown: false,
+        }}
+      />
+    </Stack>
+  );
 }
 
 export const unstable_settings = {

app/hello.tsx

@@ -0,0 +1,14 @@
+import { StyleSheet, Text, View } from "react-native";
+import React from "react";
+
+const hello = () => {
+  return (
+    <View>
+      <Text>hello</Text>
+    </View>
+  );
+};
+
+export default hello;
+
+const styles = StyleSheet.create({});

app/index.tsx

@@ -1,49 +1,7 @@
-import DifficultyFilter from "@/component/DifficultyFilter";
-import Line from "@/component/Line";
-import Searchbar from "@/component/Searchbar";
-import TripList from "@/component/TripList";
-import trips from "@/data/trips";
-import { useState } from "react";
-import { Text, View, StyleSheet } from "react-native";
+import { Redirect } from "expo-router";
 
-export default function Index() {
-  const [search, setSearch] = useState("");
-  const displayTrips = trips.filter((trip) =>
-    trip.name.toLowerCase().includes(search.toLowerCase())
-  );
+const Index = () => {
+  return <Redirect href="/(tabs)/stays/" />;
+};
 
-  return (
-    <View style={styles.container}>
-      <Text style={styles.text}>Explore Trips</Text>
-      <Searchbar setSearch={setSearch} />
-
-      <DifficultyFilter />
-
-      <View
-        style={{
-          flexDirection: "row",
-          gap: 10,
-          paddingLeft: 10,
-          paddingRight: 10,
-        }}
-      >
-        <Line width={"50%"} color="#1abc9c" />
-        <Line width={"50%"} color="#1abc9c" />
-      </View>
-      <TripList trips={displayTrips} />
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: "white",
-  },
-  text: {
-    fontSize: 20,
-    fontWeight: "bold",
-    textAlign: "center",
-    marginTop: 10,
-  },
-});
+export default Index;

component/StayCard.tsx

@@ -1,5 +1,6 @@
-import { Image, StyleSheet, Text, View } from "react-native";
+import { Image, StyleSheet, Text, TouchableOpacity, View } from "react-native";
 import React from "react";
+import { Link } from "expo-router";
 
 interface StayCardProps {
   stay: {
@@ -13,9 +14,11 @@ interface StayCardProps {
 }
 const StayCard = ({ stay }: StayCardProps) => {
   return (
-    <View style={styles.container}>
-      <Image source={{ uri: stay.img }} style={styles.image} />
-    </View>
+    <Link style={styles.container} href={`/stays/${stay.id}`} asChild>
+      <TouchableOpacity style={styles.container}>
+        <Image source={{ uri: stay.img }} style={styles.image} />
+      </TouchableOpacity>
+    </Link>
   );
 };
 

component/TripCard.tsx

@@ -1,5 +1,6 @@
-import { Image, StyleSheet, Text, View } from "react-native";
+import { Image, StyleSheet, Text, TouchableOpacity, View } from "react-native";
 import React from "react";
+import { Link } 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>
+    <TouchableOpacity style={styles.container}>
+      <Link href={`/trips/${trip.id}`}>
+        <Image source={{ uri: trip.img }} style={styles.image} />
+      </Link>
+    </TouchableOpacity>
   );
 };
 
@@ -28,7 +31,7 @@ export default TripCard;
 const styles = StyleSheet.create({
   image: {
     width: "100%",
-    height: 200,
+    height: 180,
     borderRadius: 10,
   },
   container: {

component/TripList.tsx

@@ -1,6 +1,7 @@
 import { FlatList, StyleSheet, Text, View } from "react-native";
 import React from "react";
 import TripCard from "./TripCard";
+import { Link } from "expo-router";
 
 interface Trip {
   id: number;