step 8

lucacaputo · Dec 5, 2024 · dbbc74e · dbbc74e
1 parent ad547a5
commit dbbc74e
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 3 deletions.
diff --git a/app/[detail].tsx b/app/[detail].tsx
@@ -2,15 +2,19 @@ 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";
+import { AnimatedExpoImage } from "@/components/ListItem";
 
 const DetailPage = () => {
   const { detail } = useLocalSearchParams<{ detail: string }>();
 
   return (
     <View style={styles.mainContainer}>
       <View style={styles.imageWrapper}>
-        <Image source={detail} style={styles.image} />
+        <AnimatedExpoImage
+          source={detail}
+          style={styles.image}
+          sharedTransitionTag={detail}
+        />
       </View>
       <Animated.View style={[{ padding: 16 }]} entering={FadeInDown.delay(400)}>
         <Text style={{ fontSize: 20 }}>

diff --git a/components/ListItem.tsx b/components/ListItem.tsx
@@ -19,6 +19,8 @@ type ListItemProps = {
   selectedIndex: SharedValue<number | null>;
 };
 
+export const AnimatedExpoImage = Animated.createAnimatedComponent(Image);
+
 const ListItem = ({
   source,
   listYTranslation,
@@ -76,7 +78,12 @@ const ListItem = ({
     <Animated.View style={[styles.itemWrapper, rItemStyle]}>
       <GestureDetector gesture={tapGesture}>
         <Animated.View style={[styles.imageWrapper, rImgStyle]}>
-          <Image source={source} style={styles.image} contentFit="cover" />
+          <AnimatedExpoImage
+            source={source}
+            style={styles.image}
+            contentFit="cover"
+            sharedTransitionTag={source}
+          />
         </Animated.View>
       </GestureDetector>
       <Link href={`/${source}`} asChild>