Shared Animation in React Native with Reanimated
Tags: reactnative, animation
Published: 2023-10-08 07:13:51

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


![Shared Animation Preview](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7vjwhyiy39q7xbkkjg3f.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.