Everything moves. Animation is the science of
what is a good movement, and what isn't. Whether it is with objects or drawings, Animation takes anything from one state to another, in the smoothest way possible. In this series, I would like to help you to understand how to bring the art of animation into React Native. In today’s first chapter, let’s begin with the basics. Let’s start with a shape, a square let’s say. If I want this square to move, I can change its horizontal position to the left or to the right. Now, if I want to do this with React, that’s quite simple. I create a component, which renders that square and using a state property I can play with its position. So, if translation equals to zero,
then we’re at the initial position. If I increase its value, the square will move to the right. Likewise, if I decrease “translation” to some value lower than zero, the square will go to the left. Great. Now, let’s go back to our initial position and whenever the Square is rendered, We want to update the “transition” state value. Because I set the value to 50 straight away,
the square doesn’t animate! What we could do in this case, is to increase translation by 1 every 25 milliseconds. Now it animates but there are two issues with this method. First, state updates are asynchronous. This means in our case that these updates might not come at the time we think they will. Second, this animation will be handled by the Javascript thread Which is the main thread for your application. If it is already busy fetching data or doing something else, your animation might get stuck in the middle. Knowing there is a better way of animating should be no surprise to you Since this is the whole point of this series. So let’s look at how we can get this square to smoothly animate to the right. React Native comes with an animation library called Animated which solves our performance issues. The best part of Animated is that it can run animations on the UI thread, Which is a separate one from the JavaScript thread. This allows our animations to run much smoother. To use Animated, just import it from React Native, so we can get started. Our first change is to replace useState with an Animated value. Since this value is an instance of a class, We will wrap it in a useRef call so that it only gets created once, When the component renders for the first time. Also, because translation is not
a regular state property anymore, And thus returns something different
than just a number, We need to change our View so that it knows how to deal with an animated value in its styling. To do so, just replace View with an Animated.View. Also, since we don’t have
a state setter function anymore, We can replace setTranslation with translation.setValue Which works just the same way
but for animated values. At this point, using Animated
we managed to get the exact same result. So you mind be wondering,
where’s the magic speed you promised? Well, actually, there is one final step. If you look at the code, you can see that we are animating this square’s translation From 0 to 50 pixels to the right. Now, setting its value manually every 25ms isn’t the best way of animating things. Luckily, Animated comes with its own helper functions that directly sends a command to the UI thread. Again, all we want is to change the translation value over time from 0 to 50. With Animated, you can do this in an optimised way using Animated.timing. This will take the animated value translation and change its value to 50. Calling start on this animation,
starts the animation. One last detail here is that Animated is built in a way so that you can improve the performance even more, By using what they called a native driven animation. This makes your animations run on the UI thread directly And all you need to make your animation compatible, Is to add the useNativeDriver property
to your configuration. That’s pretty simple, isn’t it? Okay, now that you know the basics of Animated,
let’s wrap this up. If there are three things to remember today,
here they are. Animating using state properties isn’t the way to animate in React Native for two reasons. It isn’t optimized for it in any way, And the animation will run on the same thread as all your app logic runs on, Which can slow down your animations
when your app is busy. Instead, we can use the Animated library which allows to animate elements in a much more optimized way. To do so, you have to represent animated properties with Animated.Values. Then, use Animated.timing to update an Animated value over time. And finally, use native driver
to run your animations on the UI thread. Alright, that’s it for now. In the next episode,
we will look at more types of animations Using what we’ve learned today and also something called interpolation. Remember to subscribe if you don’t want to miss it. Thanks for watching, and I’ll see you in the next one.
