React Native Reanimated 2 Layout Animation Example

Layout Animations are the easiest way to animate entering, exiting and change layout of your React Native components with Reanimated 2 library.

Looks good, right? And it super easy to implement!

TLDR You can find the source code on reanimated-cards-layout repo.

Setup

First, we need to create a new React Native project. Then we will need to install react-native-reanimated library and reanimated babel plugin. Please follow the documentation to do that.

Layout Animation

Imaging we have a "child" Card component:

const Card = ({ image, title }) => (  <View style={styles.container}>    <Image source={image} />    <Text>{title}</Text>  </View>)

And a parent component which renders list of cards:

<View style={styles.row}>  {cards.map(({ image, title }) => (     <Card       image={image}       title={title}     />  ))}</View>

Now, to be able to animate cards entering, exiting and layout changes, all we need to do is slightly change the Card component:

• Switch from the View to Animated.View component.
• Add entering, exiting and layout props to it.

import Animated, { FadeOutDown, FadeInUp, Layout, Easing } from 'react-native-reanimated'const Card = ({ image, title }) => (  <Animated.View     style={styles.container}    layout={Layout.duration(200).delay(200)}    entering={FadeInUp}    exiting={FadeOutDown}  >    <Image source={image} />    <Text>{title}</Text>  </Animated.View>)

That's all!

We can use predefined entering, exiting and layout transitions. Or create a custom animation.

If you have any questions, please post them in comments, press button and happy hacking!

Credits

Photo by Pixabay.