How to Animate the Items of a React Native FlatList

  • Be sure to subscribe!Animating EntryTo easily demo our animation we’ll animated to insertion of the list item.
  • When a new item is added to the people array we’ll change the opacity of the row and, via transform, the scale and rotation.It’s important to note that inside the TouchableOpacity we’re using an Animated.View which allows us to modify that component using animated values.First we’ll create a new animated value and, when the component mounts, we’ll change that value from 0 to 1 using Animated.timing.Then we need to drive our UI from these values.
  • We can’t do that in componentWillUnmout because the component will be gone before any animations can run!If you test this out though you’ll see that it doesn’t actually do anything — the row just disappears the same as before.If you comment out the onRemove function you can see that the animation is happening.What we can do is call the onRemove function when the animation completes.
  • We’re now left with some subtle, yet slick, animations for each row item for whenever they’re added or removed.
  • It covers component design, Redux, Redux Saga, and more animations!Want more React Native videos?

I was recently asked about animating items in a React Native list — specifically animating the item when added and removed. That’s what we’ll cover today! To accomplish this we’ll use the FlatList…

@spencer_carli: Want to animate items of a FlatList in #reactnative? Here’s a fun post covering how!

array we’ll change the opacity of the row and, via transform, the scale and rotation.

which allows us to modify that component using animated values.

property so that we can turn the 0 to 1 into useful data for that property.

variable to slow down or speed up the animation).

because the component will be gone before any animations can run!

If you test this out though you’ll see that it doesn’t actually do anything — the row just disappears the same as before.

function you can see that the animation is happening.

function accepts a callback which will be called when the animation completes.

Better! Still not great though, if you remove an item between two other items then once the row is remove the next row jumps up into the new spot. That’s not as smoooth as we’re going for.

We’ll again use interpolation to adjust the height of the row. That way, as the element animates out (fade, scale, rotate) the row below it will start moving into place. That way when the element is actually removed from the array there isn’t a user-perceivable-jump.

so that you can fully see what’s going on.

Did you enjoy this tutorial? I’ve got a free course that shows you how to build an app with React Native. It covers component design, Redux, Redux Saga, and more animations!

How to Animate the Items of a React Native FlatList