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 the 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.