Layout Animation

[00:00:00]
>> There are two ways, to really animate your UI in React Native. You can either define the exact animation that you need to do yourself, or you can let layout animation do all the work. So, layout animation, I was really excited when I discovered that animation is incredibly powerful, but it's not very flexible.

[00:00:18]
Basically it works by somewhat magically animating your app from the current state of the UI to the next one. So basically after you trigger the layout animation, the next UI update that happens in your app, will automatically animate UI to the next state. The downside of this is that, it's not flexible at all, and you can't choose to do a layout animation on just one element, it's kinda all or nothing.

[00:00:47]
So, in most cases you will probably end up writing your own animation, but the animation is kind of handy if you want something quick, because it's often it's still a lot better than having no animation at all. Okay, so first thing we want to do. Basically what we're going to do, is we're going to use layout animation to animate the list when you remove an item.

[00:01:16]
So the first thing we need to do for that, is we need to add the delete mood functionality. So let's open our app provider. And let's now add a another function here called handle delete mood. And this will be a React usecallback, and this takes in. So we deleted we have the mood option with this the timestamp.

[00:01:51]
So moodoption. Is called mood, and this will be a mood option with timestamp. [COUGH] All right, and now we want to set moodlist. We take the current. And we want to do the new mood list, which is the current list, and we need to filter. And this is a mood [COUGH] and we can use the timestamp to filter it, because timestamps will be unique.

[00:02:53]
You can't ever go back in timestamps. And we'll do, if mood, thought timestamp is not. What's this called again? Always call this something else, still value. [COUGH] The value that timestamp is not mood dot timestamp. So for filter, if this is true, we keep it, so we want to get rid of this one.

[00:03:26]
And we also need to update the Appdata. So we'll do set Appdata just to make sure that our persisted state will be updated as well. So we'll do mood list and new mood list, and turn new mood list. All right, this looks right to me. And let's also pass it down our context, so this will make it available for other components to use.

[00:04:03]
So if we go here to App context, we'll add a type for that. So the default for this will be a mood to delete. It should be a mood option with timestamp. Actually sorry, this is not where the type is. Yeah so we need to go up here to the context type to actually add the type, so handle delete mood will take mood, which is mood option with timestamp.

[00:04:37]
This is return maternity thing, and hey, we'll just add an empty function as the placeholder. Cool, looks like TypeScript is happy with me. So now let's go to the mood Item Row, and let's add a Delete button, so we'll add some more text, and we'll do delete. This will have a stylestyles.deleteText This at the bottom.

[00:05:22]
Family theme, fontFamilyBold, and let's make this purple. I have another color for it. I made this blue, okay. So color theme.fontFamily, colorBlue. Okay there we go, so we got a Delete button. Now, to make this into an actual button, cuz right now it's text, let's wrap this in a pressable.

[00:06:04]
And one of the nice things about context, is we don't get access to it just from screens. We can get access to it from any component. So, we're going to import context here. We'll do const, appContext equals use appContext, and then hey on the pressable we can do unpress let's create a handle, Handle delete, react, use callback.

[00:06:42]
And on press we're going to call it handle Delete. I don't handle delete, we're going to do our appContext. Delete mood, has delete mood who pass in the item, this is from props So let's just check if this works. Yep, so this got deleted, but obviously there's no animation yet.

[00:07:13]
So the way we do animation is we use layout animation from React Native, so we import it from React Native. And here in our use callback hook, we do layout animation configure next And we pass in the configuration for the actual layout transition. And there is a couple of presets, so I always use the presets, animation presets, and ease in ease out.

[00:07:46]
So let's just refresh this just incase. And now when I delete these moods, you can see that the rest of the list slides up, which is pretty nice. We should make this into a scroll view, so let's go to the history screen yeah so this is a view, so if you haven't already you probably ahead of me, change this into a scroll view.

[00:08:11]
So we can actually scroll on our mood list. All right, so currently when we add new moods, they get added to the bottom of the list. But really we would expect them to show up at the very top. So to do that we can reverse our mood list, so we just call reverse.

[00:08:32]
On this array, it will reverse it, but this actually goes has an interesting UI bug. So, if I delete this mood, we get this kind of transition where it goes up and down. And I think that's because this reverse is a mutating function, so it actually mutates this mood list and reverses it, and then we map over it.

[00:08:56]
So what we can actually do is we can, create a copy of it. So if you call dot splice on it first, was splice. So if you call mood list dot slice, and then reverse, then he creates a copy of it and we don't get this weird UI effect.

[00:09:18]
Now when we add a new mood, it gets added at the top of our list. So one thing about layout animations, is that they are still and have forever been for years and years experimental on Android. So if you want to enable these on Android, you need to explicitly set the animation enabled flag to true.

[00:09:36]
So if you copy this piece of code and open app dot TSX, and then just paste it in. So basically what this does, it goes. It's imposed platform for React Native, and he goes if you're on Android, and this option exists, set it to true. Now, since I have an Android phone here, let's see if this works.

[00:10:18]
We'll go ahead and hit Delete. There we go. It slides closed, beautiful. So one thing that I have found on Android, is that layout animation sometimes doesn't work when you have a scroll view, and the contents of the scroll view changes, there's something about keys and within scroll view that can error.

[00:10:42]
So that's why you need to kind of watch out for it on Android to make sure it works