How to Animate the Items of a React Native FlatList
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
component and the Animated
library.
Full source code is available on GitHub. The starting point for the List Row is available in ListRow-start.js
the finished code can be seen in ListRow-finished.js
.
Starting Point
Right now, when pressing the “Add Person” button, we make a request to the Random User API to fetch a user. We then append that to the people
array on the component state. Check out the video below to see where we start.
Animating Entry
To 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. Inside the render
function we use the animated value to adjust the opacity and scale (directly, because 0 to 1 is what we’re looking for) and the rotation. We interpolate the rotate
property so that we can turn the 0 to 1 into useful data for that property.
This leaves us something like this (change the ANIMATION_DURATION
variable to slow down or speed up the animation).
Animating Removal
If you look at the starter code you can see that we’ve got a function on our component called onRemove
which calls this.props.onRemove()
. Useless, right? Well it won’t be for long! What we want to do now is essentially undo everything we did in componentDidMount
. 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. The .start()
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.
BOOM! We’re now left with some subtle, yet slick, animations for each row item for whenever they’re added or removed. Check out the video below for a demo of the final product. Play with the ANIMATION_DURATION
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!
Questions? Let me know!
Hacker Noon is how hackers start their afternoons. We’re a part of the @AMI family. We are now accepting submissions and happy to discuss advertising & sponsorship opportunities.
If you enjoyed this story, we recommend reading our latest tech stories and trending tech stories. Until next time, don’t take the realities of the world for granted!