---
title: "React Native Animations Revisited - Part II"
description: "In this part of the three-part guide about animations in React Native we cover creating animations with Animated API."
url: https://www.callstack.com/blog/react-native-animations-revisited-part-2-amazing-animated-api
updated: 2026-10-24T08:39:35.389Z
---

# React Native Animations Revisited - Part II

In this part of the three-part guide about animations in React Native we cover creating animations with Animated API.

_By Mike Chudziak, Head of Engineering @ Callstack · Published 2017-01-10 · Category: Animations_

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:

- [Simple and pretty LayoutAnimation](https://www.callstack.com/blog/react-native-animations-revisited-part-1-simple-and-pretty-layoutanimation/)
- Amazing Animated API
- [How to handle gestures with PanResponder](https://www.callstack.com/blog/react-native-animations-revisited-part-3-how-to-handle-gestures-with-panresponder/)

### **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](https://facebook.github.io/react-native/docs/animated.html) 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](https://www.callstack.com/assets/interactive-animations-with-Animated.gif)

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.

[GitHub Gist](https://gist.github.com/krzysiex94/7635eae25ac6b13d9b011fad95096f2e)

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.

[GitHub Gist](https://gist.github.com/krzysiex94/4792cd306974b13f53ccce223be0ac65)

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.

[GitHub Gist](https://gist.github.com/krzysiex94/115b439d85db892092b7bae370187a10)

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 **inputValue**_._ We 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](https://www.callstack.com/assets/animated-component-with-Animated-API.gif)

## Summary

I think now you know the basics of [Animated API and LayoutAnimation](https://www.callstack.com/blog/react-native-animations-revisited-part-1-simple-and-pretty-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.**