- React will even give you a nice warning:
The output DOM is then:
This makes sense, because if you consider that the key is a unique identifier for a conceptual element, react doesn’t want to waste time rendering both.
- This will render elements like:
Now let’s suppose that we add a user to the front of the list:
This will render elements like:
After we add another user, React will go into reconciliation, where it will update the dom depending on the shape of the elements returned from the component’s render function.
- Obviously, it’s simply to add one dom element to the beginning, and leave the previous to unchanged.
- A good key uniquely identifies the content of the element.
- Here are the two trees produced with the username as the key:
React now understands that the elements with keys “bob” and “sue” have remained unchanged, and we’ve simply re-introduced a new element with key “joe”.
This post will explain the importance of keys in React and some edge cases to consider when choosing them.
Continue reading “Why you need keys for collections in React.”
- 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”