Reanimated 2 Animations

[00:00:00]
>> So let me just quickly show you on the home screen, just how the reanimated components work. So I'm going to just had a little view here. And I'm going to animate the styles of this view just to see how it works. Okay, so let's do, const, shared = useSharedValue.

[00:00:33]
Let's start with a 0. And then let's do a style which is useanimatedstyle. And this is a function. And it returns an object which is the style object. And so, Yeah it's just a returning empty object to begin with. All right, so let's make this into a square so I'm going to do styles.square and I'm going to give it some width and a height And a background color of light green styles.square.

[00:01:42]
Okay, so we have a little square here, so I want to do it so that when I click on the square, it moves slightly to the right. So to do that, I want to actually use a pressable, so let's import pressable, and let's do an OnPress. We'll do shared.value equals shared.value + 20.

[00:02:21]
Now, I wanna use this shared value. To update this style, so let's do transform, and that's this an array and then we want a object. So we want to translate y to whatever the shared value is shared value, All right, and now we wanna add this style to our pressable.

[00:02:54]
Now in order for animated styles to take any effect on your component, this needs to be a reanimated component. So the way to do that is we'll do const ReanimatedPressable. And then where we have react-native-reanimated we need the default export so we animate it and we'll do reanimated.create animated component and we pass in the pressable.

[00:03:32]
And we're going to use that instead of depressible. And now we can pass in the style as the second item on our styles array. Now when I click on that, okay, translate y while she goes down stairs to translate x. They get, so every time I click on it, it moves.

[00:03:53]
Now you'll notice that it moves, but it's not animating so I want it to move smoothly. So this is where the, width transition helper methods come in. So if you remember in the animated talks we have with timing, with spring, with decay, with timing is the one that you're going to be using most often or at least I do so if we're important with timing.

[00:04:16]
So here OnPress where we set the new value, we can do shared.value and with timing. So this will set this value to this new value, so the current value + 20 but it will transition to it. So now let's reload. When working with the animator to it's often good to reload in between hot reloading because it doesn't always update correctly.

[00:04:51]
So now when I, whenever I click on it, it kind of shifts slide through right. There's an animation config here as well. So I can tweak the duration. So I can for example say duration, 1000 milliseconds, so we'll take whole second to go to the right. COUGH] So on a high level this is how animating a component using animator styles will work and let's use this now on our button.

[00:05:25]
So currently what's happening is you can't really choose an emoji, you can't really choose a mood, if you haven't selected one. However, this button looks enabled. So we just want to do a visual UI update for the user to know that well, I know that I can't currently choose anything because this is dimmed out.

[00:05:50]
So, I'm going to remove this code from here. [SOUND] All right. Let's go into our mood picker component. Okay, so our choose button is over here, and it's suppressible. So, we need to create an animated component for it. So let's import, we animate it from React-native-reanimated. So, we were talking about default exports versus non default exports.

[00:06:38]
So, in the code base and working at the moment, we have some people imported as animated and some people are important as reanimated. So, we have two standards. So if this was a named exports, we wouldn't have that problem. So const ReanimatedPressable, he's reanimated, create animated component and as person depressible.

[00:07:10]
Now let's use it for our choose button. Let's create an animated style for this. So const buttonStyle, is useAnimatedStyle. This is an error function that returns an object. It has a dependencies array, And let's do the opacity as to if there is a selected mood, then let's do opacity 1.

[00:07:45]
Otherwise, let's do opacity no 0.5. And let's also pass this button style into our buttons. Excellent, so now we are at where we were with the previous case of doing animations. So this works, but it doesn't actually animate. So how do we make this animate? Well, the handy thing about those with transition hooks is that you can use them within use and then we just start as well.

[00:08:21]
So if you toggle between two states, you don't have to create an external shared value just to track it, you can do it here. So if we input with timing from react-native-reanimated, we can wrap these one as no 0.5 in with the timing function. And then if this changes, this opacity gets changed to one ordinal 0.5, but it will transition to that value.

[00:08:55]
So now if we reload and select one of these, okay, so the reason this doesn't work is that there is a dependencies array, but my ESN plugin isn't telling me that's need to add something to it. So make sure you add selected mood to the dependencies array. And reload, now when I select something, you can see that it goes from opacity, no 0.5 to opacity 1.

[00:09:27]
Now, only thing here is that you can actually animate several properties at the same time. So we can also animate the scale. So if we do transform. There's an array and we'll do scale and we can do a similar thing. So we'll do, if the selected mood is a mood is selected, we will do a scale of one.

[00:09:52]
Otherwise that's to no 0.8. And we can add a width timing 1. So now if we reload You can see that this is small and then when we choose an emoji, It kind of both face in and zooms in a little bit. Now you notice that I didn't add with timing here.

[00:10:22]
This is because when I was doing this earlier on Android, there is currently a bug for adding a timing function on scale on this particular version already talked to the reanimated folks about it, so we'll get this fixed soon. All right, let's make sure that we have our Android app also running.

[00:10:45]
So, Toby hasn't been built. Yep, this needs to be rebuilt. So let's rebuild Android, there you go so it zooms out you choose and then it both goes to positive one and it flows in. So this is a pretty quick simple example, but it's very powerful because you use the same kind of methods to do all kinds of animations.