DEV Community

Gaurav Rawat
Gaurav Rawat

Posted on

Shared Animation in React Native with Reanimated

#reactnative #animation

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

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

Create the project

npx react-native init SharedTransition
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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> ); }
Enter fullscreen mode Exit fullscreen mode

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> ); }
Enter fullscreen mode Exit fullscreen mode

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> ); }
Enter fullscreen mode Exit fullscreen mode

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

Top comments (0)