Using Animated Style from Reanimated 2 to Animate a View

Kadi Kraman: [0:00] We start with a plain React Native project rendering a single view that's styled like a circle. Reanimated 2 is available both for plain React Native projects and Expo projects. If using Expo, you can reinstall it using Expo install, React Native Reanimated.

[0:15] This project is using plain React Native, so let's go to the installation. Let's copy the young command and let's add it to our project. Now, since this library is using Native code, we're going to cd into the iOS directory and pod install Native dependencies.

[0:29] Then we're going to cd back to the root directory and run NPX React Native run iOS to rebuild the app. Now we'll go back to the documentation and we'll also need to add the Babel plug-in to our Babel config.

[0:42] Let's copy this plug-in and let's open our Babel config file. Let's add a plugins array here, and let's add the plug-in. If you already have plugins array, you'll need to make sure that this plug-in is the last item in the array. Finally, let's go to the Metro process and let's run yarn start again.

[1:01] After refreshing the app, we'll be able to use Reanimated. First, let's import switch from React Native. Let's add a switch here, underneath the view. Let's also create a const array = react useState, and let's initialize this as false. Let's call these as is-selected and set e-selected.

[1:24] For the switch, let's do value = is-selected. On value change, let's toggle the value of is-selected. Now that we have a toggle button, we can use it to set the size of this circle. Let's start by importing use animated style from React Native Reanimated.

[1:45] Let's do const circle style = use animated style. This takes in an error function, which returns a style object. Also, let's pass in an empty depend use array. For the style, let's do a transform. This will be an array and we'll do a scale effect.

[2:04] Scale if is-selected is true, let's do two and otherwise, let's do one. Lastly, let's pass in is-selected into the dependencies array. Let's take this circle style and pass it into the view. We'll need to turn this into an array and pass it in as one of the items and save and reload.

[2:22] Now when we toggle this, the animated effect doesn't work and that's because this is a regular view, not a reanimated view. Animated styles can only be applied to animated views. Otherwise, they get ignored.

[2:35] Let's import Reanimated, so the default export from React Native Reanimated. Here in the view, we can do Reanimated.view. This will be the reanimated version of this view. Now after saving and reloading, when we toggle the switch, you'll see that the circle snaps to a large and a small value, but this isn't an animation.

[2:54] In order to make these values increase and decrease gradually, we can use with timing. Rather than setting them to two and to one, we wrap these in a with timing. We'll do with timing two and with timing one. Saving this and reloading.

[3:10] Always reload the app fully when working with animated styles because you might not get the latest version otherwise. When we toggle this, you'll see that the circle increases and decreases gradually.

[3:20] You can set how quickly this animation takes place by passing in a config object. We'll do duration let's say, 100 for making it bigger, and let's do duration 1000, so a whole second for when it goes smaller.

[3:35] Let's reload the app, and now we toggle it bigger and we toggle it smaller. There are other functions available other than the with timing.

[3:42] For example, if we go to the documentation and the API reference and animations, we'll see we have with timing, with spring, with decay, with delay, with sequence, and with repeat, but with timing will be the one you'll be using most frequently.

[3:56] You can also apply animations using an external value. For that you can use useShared value and we can declare it here. We'll do const my val = useShared value, and we'll pass it in an initial value of zero. Let's also import pressable from React Native.

[4:15] Let's wrap this circle in a pressable. We'll do pressable, put the reanimated view inside, and we'll do on press handle press. Let's also do a const handle press = react to useCallback. Let's pass in the arrow function and to start with an empty dependencies array.

[4:35] Whenever this handle press is called, let's increase my val by 10. We'll do my val value = my val value + 10. We'll also need to pass my val into the dependencies array here. We can use this my val in another transform effect, and let's apply another transform.

[4:54] We will do translate X and let's use my val.value and let's pass in my val into dependencies array. After we reload our app, you notice the switch will work as previously, but now when we tap on the circle, then it moves 10 points to the right using this translate X.

[5:11] Again, this just snaps to the right. To make this transition smooth, when we set the new value in the useCallback, we will wrap this in with timing and this will ensure that the value gets set to current value + 10, but it will be a smooth transition. Saving and reloading. Now when we tap, you'll see the transition is now gradual.