React Native Fundamentals — Animation
All animations are built on these three simple concepts
Animations are a cornerstone of amazing UX, but implementing them in React Native can be daunting, especially when compared to the simplicity of web animations.
As it turns out, there are only three core concepts that drive 99% of what you’ll want to do with the Animated API in React Native. Let’s go through them one by one, so that by the time you’re done reading you’ll have a great foundation to learn from.
1. Values
If we want a value to be reactive, we use a state hook that returns a reactive value.
Similarly, if we want a value to be animatable, we need to create an animated value like so:
This syntax is a little funky, but this is the way to do it. Here we set the initial value to 1, but you can set it to whatever you like.
This animated value is not really for displaying, but for attaching to…
2. Views
The humble View is our best friend in React Native, but it doesn’t understand animations at all. If you want to do anything other than render in one place, you’ll need to swap it out for an Animated.View .
Luckily, Animated.View is the exact same as View , except this one understands animated values.
Not all properties can be animated well. It’s most common to use them with transform properties, like scale and translate.
Now that our value is hooked up to an animated view, we’ll make the value change with…
3. Timings
We can think of a timing as a function to describe how a value will change over time. In our example so far, myAnimatedValue === 1 and is animating the scale of a View. The following timing will slide the value smoothly from 1 to 2 over 5 seconds.
This timing function takes the value to animate, followed by an object to describe how the timing will run. Then call start() to make the timing run.
If you want way better performance, just add useNativeDriver: true , but keep in mind you’ll be limited to a few animatable properties.
That’s it.
You just learnt the basics of Values, Views, and Timings; the building blocks of pretty much all React Native Animations.
This is by no means an extensive guide, and there is lots more to learn about different timings, responding to events and interpolating values, but they all build upon this knowledge.
If this helped you de-mistify Animations in RN, share this article with someone who would like it!
Happy Animating!
