Layout Animations in React Native

While dealing with animations can get quite complicated in React Native, there are simple ways to automatically animate layout changes in a screen.

Three changes that can happen in a layout:

  • Creating new views
  • Updating existing views
  • Deleting existing views

You can use React Native’s built-in LayoutAnimations to automatically animate these changes. Let’s take a look at an example:

I created a simple Todo list app in which the user can add new items to a list, expand each item, and delete them. This looks fine, but without any animations, the users might have a hard time keeping track of the changes. For example, when adding a new item, it’s not instantly obvious whether the new item is getting added to the top or the bottom of the list. Fortunately, we can improve this UI significantly just by adding some simple layout animations.

Here is the same app after adding some layout animations:

Looks much better! Right?

The easiest way to animate layout changes is to use the configureNext() function with presets. We just need to call configureNext()before updating a state in our component. The config parameter in this function defines how you want the next layout change to be animated.

In this sample app, I have the list of items stored in a state and a function called addItem that adds a new item to the list:

So, in order to animate a new item being added to the list, all we need to do is to call configureNext() before updating the state:

I am using the easeInEaseOut preset here, but there are other presets that you can use as well. You can also create custom animation configurations if you’re looking for specific effects.

Hope you enjoyed reading about LayoutAnimations in React Native. Let me know what you think 👋

Software Developer @ Shopify working on mobile payments. Currently playing with React Native & Kotlin Multiplatform Mobile (KMM)