DEV Community

Cover image for React Native Reanimated 2 Layout Animation Example
Vladimir Vovk
Vladimir Vovk

Posted on β€’ Edited on

11 2

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.

Layout Cards Animation

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

And a parent component which renders the list of cards:

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

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

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.

Image of Datadog

The Future of AI, LLMs, and Observability on Google Cloud

Datadog sat down with Google’s Director of AI to discuss the current and future states of AI, ML, and LLMs on Google Cloud. Discover 7 key insights for technical leaders, covering everything from upskilling teams to observability best practices

Learn More

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more