Layout Animation

[00:00:00]
>> Kadi Kraman: So the next thing we're going to talk about is animation. There's actually a huge amount you can do with animation in React Native. Unfortunately, a lot of it is quite involved, there's quite a lot of code involved. I originally thought about doing like a swipe to delete example here or something like that, but there's quite a lot of code to make that happen.

[00:00:18]
But, thankfully, there is a beautifully easy way to do limited but full-page and beautiful animations in React Native. And it's called layout animation. Layout animation is part of React Native, so you can import it from React Native. And what it does is it animates the UI from its previous state to its current state.

[00:00:44]
So you don't get any control over how it animates, it kinda just does some platform-specific prettiness. And the way you call layout animation immediately before you do a state change that will trigger the UI to update. So in our case, we'll need to call it just before we set our ShoppingList.

[00:01:07]
So in the useEffect, we'll do layout animation, configureNext. And there's a bunch of presets that are already given to you, and to be honest, I always, always end up using this one. So LayoutAnimation presets and easeInEaseOut and we can copy this and use it everywhere, where we call setShoppingList.

[00:01:41]
>> Kadi Kraman: Lovely, so now, when you mark things as completed, they actually automatically animate up and down, which is pretty neat. For more advanced animation, you can use Animated, that's part of React Native. But most of the time, you would actually use Reanimated.
>> Kadi Kraman: React Native Reanimated, which is a hooks-based animation library.

[00:02:10]
So if you're looking to create custom animations with React Native, the two libraries that you're after is React Native Animated and React Native Gesture Handler, which are both built by Software Mansion. They're really good libraries, they work really well together. So if you do want to build your own swipe to delete, those are the libraries that you use.

[00:02:29]
>> Speaker 2: So, when the chat is asking, so configureNext only impacts the directly next line, that is a state update.
>> Kadi Kraman: Not directly the next line, it will be the next UI update. So UI updates actually get batched. So with this use state, if you did a bunch of these use states, you did four of them in one hook, then they actually get batched.

[00:02:54]
So it will be the next time the component re-renders in the UI updates. So that's what I guess triggered.