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!

Fetch

How to Become a React Native Developer in 2018

Migrate from ExNavigation to React Navigation

Learn React Native Development!

Too Long; Didn't Read

Make resilience your competitive advantage

How to Animate the Items of a React Native FlatList

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

12 Fun Challenges to Learn React Native

10 Questions for Aswin Ganesh, Noonie Nominee for Functional Programming

10 Best React Native Chart Libraries

11 Trending React Native UI Components

12 Fun Challenges to Learn React Native

12 Fun Challenges to Learn React Native

10 Questions for Aswin Ganesh, Noonie Nominee for Functional Programming

10 Best React Native Chart Libraries

11 Trending React Native UI Components

12 Fun Challenges to Learn React Native

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps