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…
Continue reading “How to Animate the Items of a React Native FlatList”