React Native: How to use Reanimated shared element transitions in React Native?

1npx expo install react-native-reanimated react-native-shared-element

1import { createSharedElementTransition } from "react-native-shared-element";
2import Animated, { useSharedValue, useAnimatedStyle } from "react-native-reanimated";
3
4// List screen
5function ListScreen({ navigation }) {
6  return (
7    <FlatList
8      data={items}
9      renderItem={({ item }) => (
10        <TouchableOpacity
11          onPress={() => navigation.navigate("Detail", { item })}
12        >
13          <SharedElement id={`item.${item.id}.image`}>
14            <Image source={{ uri: item.imageUrl }} />
15          </SharedElement>
16          <Text>{item.title}</Text>
17        </TouchableOpacity>
18      )}
19    />
20  );
21}
22
23// Detail screen
24function DetailScreen({ route }) {
25  const { item } = route.params;
26  return (
27    <View>
28      <SharedElement id={`item.${item.id}.image`}>
29        <Image source={{ uri: item.imageUrl }} style={styles.hero} />
30      </SharedElement>
31      <Text style={styles.title}>{item.title}</Text>
32    </View>
33  );
34}

1import { createSharedElementStackNavigator } from "react-navigation-shared-element";
2
3const Stack = createSharedElementStackNavigator();
4
5function App() {
6  return (
7    <Stack.Navigator>
8      <Stack.Screen name="List" component={ListScreen} />
9      <Stack.Screen
10        name="Detail"
11        component={DetailScreen}
12        options={{ headerShown: false }}
13      />
14    </Stack.Navigator>
15  );
16}