step 7

app/[detail].tsx

@@ -0,0 +1,40 @@
+import { IMG_HEIGHT } from "@/constants";
+import { useLocalSearchParams } from "expo-router";
+import { StyleSheet, View, Text } from "react-native";
+import Animated, { FadeInDown } from "react-native-reanimated";
+import { Image } from "expo-image";
+
+const DetailPage = () => {
+  const { detail } = useLocalSearchParams<{ detail: string }>();
+
+  return (
+    <View style={styles.mainContainer}>
+      <View style={styles.imageWrapper}>
+        <Image source={detail} style={styles.image} />
+      </View>
+      <Animated.View style={[{ padding: 16 }]} entering={FadeInDown.delay(400)}>
+        <Text style={{ fontSize: 20 }}>
+          Eu do nulla officia sunt magna incididunt ipsum do dolor Lorem aliqua.
+          Qui aute elit cupidatat adipisicing magna proident adipisicing velit
+          quis amet aliquip ut occaecat. Eiusmod Lorem nulla et deserunt amet in
+          adipisicing ipsum sit mollit magna ullamco Lorem aliqua. Sint tempor
+          reprehenderit commodo fugiat fugiat. Aliquip adipisicing eu eu
+          reprehenderit aute pariatur. Deserunt qui sint anim consequat fugiat
+          consectetur duis aute.
+        </Text>
+      </Animated.View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  mainContainer: {
+    flex: 1,
+  },
+  imageWrapper: {
+    height: IMG_HEIGHT + 300,
+  },
+  image: { flex: 1, width: "100%" },
+});
+
+export default DetailPage;

app/_layout.tsx

@@ -8,6 +8,7 @@ const RootLayout = () => {
       <SafeAreaProvider>
         <Stack>
           <Stack.Screen name="index" options={{ headerShown: false }} />
+          <Stack.Screen name="[detail]" options={{ headerTitle: "Detail" }} />
         </Stack>
       </SafeAreaProvider>
     </GestureHandlerRootView>

components/ListItem.tsx

@@ -1,4 +1,4 @@
-import { StyleSheet, ViewStyle } from "react-native";
+import { Button, StyleSheet, View, ViewStyle } from "react-native";
 import Animated, {
   SharedValue,
   useAnimatedReaction,
@@ -10,6 +10,7 @@ import Animated, {
 import { Image } from "expo-image";
 import { IMG_HEIGHT, STACK_OFFSET } from "@/constants";
 import { Gesture, GestureDetector } from "react-native-gesture-handler";
+import { Link } from "expo-router";
 
 type ListItemProps = {
   source: string;
@@ -55,6 +56,9 @@ const ListItem = ({
 
   const rItemStyle = useAnimatedStyle<ViewStyle>(() => ({
     transform: [{ translateY: yOffset.value }],
+  }));
+
+  const rImgStyle = useAnimatedStyle<ViewStyle>(() => ({
     height: withTiming(
       index === selectedIndex.value ? IMG_HEIGHT + 200 : IMG_HEIGHT
     ),
@@ -69,26 +73,37 @@ const ListItem = ({
   });
 
   return (
-    <GestureDetector gesture={tapGesture}>
-      <Animated.View style={[styles.itemWrapper, rItemStyle]}>
-        <Image contentFit="cover" source={source} style={styles.image} />
-      </Animated.View>
-    </GestureDetector>
+    <Animated.View style={[styles.itemWrapper, rItemStyle]}>
+      <GestureDetector gesture={tapGesture}>
+        <Animated.View style={[styles.imageWrapper, rImgStyle]}>
+          <Image source={source} style={styles.image} contentFit="cover" />
+        </Animated.View>
+      </GestureDetector>
+      <Link href={`/${source}`} asChild>
+        <Button title="More" />
+      </Link>
+    </Animated.View>
   );
 };
+
 const styles = StyleSheet.create({
   itemWrapper: {
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: "#ccc",
     width: "100%",
     position: "absolute",
     marginLeft: 16,
-    height: IMG_HEIGHT,
+  },
+  imageWrapper: {
+    flex: 1,
+    borderRadius: 8,
+    overflow: "hidden",
   },
   image: {
-    borderWidth: 1,
-    borderColor: "#ccc",
     flex: 1,
     width: "100%",
-    borderRadius: 8,
   },
 });
+
 export default ListItem;