add nice react-navigation animations

Author: flexbox

hackathon/spacecraft/src/components/Image.tsx

@@ -1,16 +1,21 @@
 import React from "react";
-import type { ImageProps } from "expo-image";
+// import type { ImageProps } from "expo-image";
+import { Image as RNImage, ImageProps } from "react-native";
 import { Image as ExpoImage } from "expo-image";
+import type { AnimateProps } from "react-native-reanimated";
+import Animated from "react-native-reanimated";
 
-export const Image = (props: ImageProps) => {
+const AnimatedImage = Animated.createAnimatedComponent(RNImage);
+
+export const Image = (props: AnimateProps<ImageProps>) => {
   // We should have a unique value for each image
-  const blurhash = "L56t?txt00D*t7M{Rjxu00Rk~p-:";
+  // const blurhash = "L56t?txt00D*t7M{Rjxu00Rk~p-:";
 
   return (
-    <ExpoImage
-      placeholder={blurhash}
-      contentFit="cover"
-      transition={350}
+    <AnimatedImage
+      // placeholder={blurhash}
+      // contentFit="cover"
+      // transition={0}
       {...props}
     />
   );

hackathon/spacecraft/src/components/StarshipCard.tsx

@@ -56,7 +56,10 @@ export const StarshipCard = ({ ship, index }: StarshipCardProps) => {
 
   const navigation = useNavigation<StarshipDetailsScreenParams>();
   const handleGoToDetails = () => {
-    navigation.navigate(Routes.STARSHIP_DETAILS_SCREEN, ship);
+    navigation.navigate(Routes.STARSHIP_DETAILS_SCREEN, {
+      ...ship,
+      image: source,
+    });
   };
 
   // visibleIndex -> prop
@@ -76,6 +79,7 @@ export const StarshipCard = ({ ship, index }: StarshipCardProps) => {
       <Image
         style={{ width: "100%", height: 200, borderRadius: 12 }}
         source={source}
+        sharedTransitionTag={`image-${ship.model}`}
       />
       {/* we remplace with an Image to have the benefits of `expo-image` */}
       {/* <Card.Cover source={source} /> */}

hackathon/spacecraft/src/navigation/StarshipNavigator.tsx

@@ -24,7 +24,6 @@ export const StarshipNavigator = () => {
     <Stack.Navigator
       screenOptions={{
         headerShown: false,
-        presentation: "modal",
       }}
     >
       <Stack.Screen
@@ -34,6 +33,13 @@ export const StarshipNavigator = () => {
       <Stack.Screen
         name={Routes.STARSHIP_DETAILS_SCREEN}
         component={StarshipDetailsScreen}
+        options={{
+          presentation: "transparentModal",
+          animation: "fade",
+          contentStyle: {
+            backgroundColor: "#fff",
+          },
+        }}
       />
     </Stack.Navigator>
   );

hackathon/spacecraft/src/screens/StarshipDetailsScreen.tsx

@@ -11,7 +11,6 @@ import {
 import { Text, DataTable, List, FAB, Chip } from "react-native-paper";
 
 import type { StarshipProps } from "../../api/types";
-import { useImage } from "../hooks/useImage";
 
 import { Image } from "~/components/Image";
 
@@ -34,9 +33,12 @@ export const StarshipDetailsScreen = ({
     cargo_capacity,
     hyperdrive_rating,
     max_atmosphering_speed,
+    model,
+    // @ts-ignore
+    image,
   } = route.params;
 
-  const source = useImage(name);
+  // const source = useImage(name);
   const navigation = useNavigation();
 
   const handleClose = () => {
@@ -52,7 +54,11 @@ export const StarshipDetailsScreen = ({
       <ScrollView>
         <View style={styles.scrollContainer}>
           <View style={styles.imageContainer}>
-            <Image style={{ width: "100%", height: 350 }} source={source} />
+            <Image
+              style={{ width: "100%", height: 350 }}
+              source={image}
+              sharedTransitionTag={`image-${model}`}
+            />
             <View style={[styles.closeContainer, styles.left]}>
               <TouchableOpacity
                 onPress={handleClose}