Shared Animation in React Native with Reanimated

Note: Before we begin, I would like to tell you that this feature is an experimental feature and is not yet recommended for production use.

Intro
We’ll be creating a simple shared animation between two screens.

A preview of what we will be doing in the tutorial

GIF

We will start with creating a project and installing the required libraries.

Create the project

npx react-native init SharedTransition

Install the required libraries

yarn add react-native-reanimated
yarn add @react-navigation/native       
yarn add @react-navigation/native-stack  
yarn add react-native-screens            
yarn add react-native-safe-area-context 

Note: Shared Element Transitions only work with the native stack navigator (react-native-screens).

Lets start with the coding part.

1) Create a file and write the navigation this will be your initial file.

import { NavigationContainer } from '@react-navigation/native'
import { createNativeStackNavigator } from '@react-navigation/native-stack'
import Home from './screens/Home'
import DetailScreen from './screens/DetailScreen'

const Stack = createNativeStackNavigator()

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={Home} />
        <Stack.Screen name="DetailScreen" component={DetailScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

As visible in our code, we have used Stack Navigator and added two components to the stack namely Home & DetailScreen.

2) Let's start working on the screens, We will start with Home

import React from 'react';
import {View, Button} from 'react-native';
import Animated from 'react-native-reanimated';

export default function Home({navigation}) {
  return (
    <View style={{flex: 1}}>
      <View style={{width: 150, height: 150}}>
        <Animated.Image
          source={{
            uri: 'https://fastly.picsum.photos/id/379/200/300.jpg?hmac=IEcRQyv-DIaRsldE8jIdMRW5IHCTyemefU-bbCJpY34',
          }}
          sharedTransitionTag="sharedTag"
          style={{width: 150, height: 150}}
        />
      </View>
      <Button
        title="Go to Details"
        onPress={() => navigation.navigate('DetailScreen')}
      />
    </View>
  );
}

We created an Animated.View (from react-native-reanimated), and give it a sharedTransitionTag.
sharedTransitionTag is the prop used by the Reanimated library to connect elements between the screens.

3) Let's create DetailScreen where the user will be navigated to.

import React from 'react';
import {View, Button} from 'react-native';
import Animated from 'react-native-reanimated';

export default function DetailScreen({navigation}) {
  return (
    <View
      style={{
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
      }}>
      <View style={{width: 100, height: 100}}>
        <Animated.Image
          source={{
            uri: 'https://fastly.picsum.photos/id/379/200/300.jpg?hmac=IEcRQyv-DIaRsldE8jIdMRW5IHCTyemefU-bbCJpY34',
          }}
          sharedTransitionTag="sharedTag"
          style={{width: 100, height: 100}}
        />
      </View>
      <Button title="Go back" onPress={() => navigation.navigate('Home')} />
    </View>
  );
}

Please note, Do not import Animated from react-native else this will not work.