HOME
|
COMMUNITY
|
BLOG
|
React Native Animations Revisited — Part II

React Native Animations Revisited — Part II

In short

In this segment of our comprehensive three-part guide on animations in React Native, we delve into the art of crafting animations using the powerful Animated API. Throughout this guide, we will explore the various aspects of the Animated API, from the fundamentals of animating components to more advanced techniques for crafting intricate and visually pleasing motion. So, let's embark on this journey to breathe life into your mobile apps through the world of React Native animations!

Amazing Animated API

In this part I would like to cover a bit different cases than LayoutAnimation. It is a really great tool, but it has some limitations. We’ll try to implement something more with Animated. This is second part of React Native animation series:

Animated API

To do more complex and interactive animations, you’ll need to use Animated. Basic knowledge of CSS animations and transitions could be a plus, but don’t worry if you don’t know them. There are a lot of tutorials over the internet and also GitHub docs are pretty helpful.

As I wrote before, Animated allows us to do some more complex animation. Say we want to make our component spin. It would be hard with LayoutAnimation, and now our new friend steps in.

interactive animations with Animated

How would we achieve it? Just take a look at the example.

What exactly did we do? At the beginning we added our Animated.Value(0) to state.

It’s a very important step, since it determines our component’s animation state. Why is it 0? Because in this case it will tell us about the percentage of the animation complete. You can set any value you want here, but in our case 0 equals 0% of our animation, and 1 stands for 100%.

Second step is the creation of animation function. We used the Animated.timing() function (there is more!) to specify our animation’s behavior, and started it afterwards.

Another interesting thing is callback function inside our .start() call. It allows us to create infinite animation loop. Last step requires updating Animated Component’s styles.

That’s where CSS knowledge is helpful. .interpolate() function helps us transpile our animation values into real style values. You can specify what your outputValue should look like based on inputValueWe can map either numbers, so value from range [0, 1] can be changed to value from [0, 100] range (for 0.1 it will be 10 in this case), or even strings like degrees (in our example 0.5 stands for 180deg).

Animated API has really huge capabilities. If we would like to move our spinning component, then it’s very easy. You can simply add another transition for our component almost the same way we did before.

Take look at result:

animated component with Animated API

Summary

I think now you know the basics of Animated API and LayoutAnimation, you can decide by yourself which way to go. In the next part we’ll cover handling gestures with PanResponder. You’ll love how it combines with Animated.

React Galaxy City
Get our newsletter
Sign up

By subscribing to the newsletter, you give us consent to use your email address to deliver curated content. We will process your email address until you unsubscribe or otherwise object to the processing of your personal data for marketing purposes. You can unsubscribe or exercise other privacy rights at any time. For details, visit our Privacy Policy.

Callstack astronaut
Download our ebook
Download

I agree to receive electronic communications By checking any of the boxes, you give us consent to use your email address for our direct marketing purposes, including the latest tech & biz updates. We will process your email address and names (if you have entered them into the above form) until you withdraw your consent to the processing of your names, or unsubscribe, or otherwise object to the processing of your personal data for marketing purposes. You can unsubscribe or exercise other privacy rights at any time. For details, visit our Privacy Policy.

By pressing the “Download” button, you give us consent to use your email address to send you a copy of the Ultimate Guide to React Native Optimization.