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 component and the library. FlatList Animated Full source code is . The starting point for the List Row is available in the finished code can be seen in . available on GitHub ListRow-start.js ListRow-finished.js Starting Point Right now, when pressing the “Add Person” button, we make a request to the to fetch a user. We then append that to the array on the component state. Check out the video below to see where we start. Random User API people Want more React Native videos? Be sure to subscribe! Animating Entry To easily demo our animation we’ll animated to insertion of the list item. When a new item is added to the array we’ll change the opacity of the row and, via transform, the scale and rotation. people It’s important to note that inside the we’re using an which allows us to modify that component using animated values. TouchableOpacity Animated.View 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 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 property so that we can turn the 0 to 1 into useful data for that property. render rotate This leaves us something like this (change the variable to slow down or speed up the animation). ANIMATION_DURATION Animating Removal If you look at the starter code you can see that we’ve got a function on our component called which calls . Useless, right? Well it won’t be for long! What we want to do now is essentially undo everything we did in . We can’t do that in because the component will be gone before any animations can run! onRemove this.props.onRemove() componentDidMount componentWillUnmout 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 function you can see that the animation is happening. onRemove What we can do is call the function when the animation completes. The function accepts a callback which will be called when the animation completes. onRemove .start() 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 so that you can fully see what’s going on. ANIMATION_DURATION Did you enjoy this tutorial? I’ve got a . It covers component design, Redux, Redux Saga, and more animations! free course that shows you how to build an app with React Native Want more React Native videos? Be sure to subscribe! Questions? Let me know!