Animating layout components

A common use case is animating the entering and exiting layout of your components. This means that when your component renders for the first time and when you unmount your component, it appears animated. React Native Reanimated is an API that lets you animate layouts and add animations such as FadeIn, BounceIn, and ZoomIn.

React Native Reanimated also provides a special Animated component that is the same as the Animated component in the Animated API, but with additional props:

• entering: Accepts predefined animation when the component will mount and render
• exiting: Accepts the same animation object, but it will be called when the component unmounts

Let's create a simple todo list with a button for creating tasks, and a feature that allows us to delete tasks when we click on them.

Important Note

It's impossible to see animation in screenshots, so I suggest you open the code and try to implement the animations to see...