React Native:Tutorial #6 – React Native Animation

One of the best way to improve user experience in mobile application is to use animation. In Android and iOS native development, animation is handled differently. Also, not all animations available in Android can be implemented in iOS and vice versa. React Native Animation provides following two APIs to implement animation in both Android and iOS :

1. Animated API
2. LayoutAnimation API

If you have not read previous articles in this series, we request you to do so-

Tutorial Index

1. Tutorial #1 – React Native – Introduction
2. Tutorial #2 – React Native Props and State
3. Tutorial #3 – Styling React Native App
4. Tutorial #4 – React Native UI Components
5. Tutorial #5 – React Native API Integration
6. Tutorial #6 – React Native Animation
7. Tutorial #7 – Top 10 React Native libraries

In this tutorial, we will learn how to use these APIs with examples .

Animated API :

We can use the animated API with View, Text, ScrollView, Image, FlatList and SectionList. We can also use Animated.createAnimatedComponent() method to create one animated component.

For example :

In this example, it will create one view from ‘width’ ’0’ to ’100’ over a duration of 3 seconds. Notice that we are using ‘Animated.View’ instead of ‘View’. Also, we are using ‘Animated.timing’ method to change the value of ‘width’. ‘width’ is a value defined in the ‘state’ of the component. Its value is used to set the width of the ‘Animated.View’. Using the same approach, we can animate both height,width of a view, add animation to the opacity of a view etc. This is not same as changing the state continuously. If we change the state continuously, it will re-render the component again and again, which will impact the performance of the view. Animation API uses a different mechanism to show the animation more efficiently.

Animation configuration :

Animated provides three different types of animations :

1. Animated.decay() : These types of animations starts with a initial velocity and gradually slows down to a final velocity.
2. Animated.spring() : Spring physics model animation .
3. Animated.timing() : It animates a value over a period of time. This is one of the most commonly used function of ‘Animated’.

Animated values :

In the above example, we have used Animated.value. Animated.Value() is used for single values. Other than this method, we also have Animated.ValueXY(). This is used for vectors.

For starting an animation, start() method is used. This method optionally takes one completion handler block that will be called once it completes. We can also call stop() method to stop one animation before it completes with the predefined values. For example, we may need to call stop() on any user interaction or if any other animation starts. We can detect on the completion block if the animation was finished normally or if stop() was called. It gives us one flag called ‘finished’ on the completion block that will be ‘true’ for normal completion and ‘false’ for ‘stop()’ completion.

Combine animations :

We can combine two animated values to create a new one. Following are the methods to combine animations :

1. Add : Animated.add()
2. Subtract : Animated.subtract()
3. Divide : Animated.divide()
4. Modulo : Animated.modulo()
5. Multiply : Animated.multiply()

Gestures :

If we are working with animation, we may have to deal with gestures. Animated.event() method is used to map gesture events to animated values. Structured map syntax is used for that.

Reading the current animation value :

Sometimes we may need to read the current animation value of a view. But, as I have explained before, this is not like updating the state value continuously. This is mainly done in the native runtime and so, tracking the current value is difficult. Following are the two ways that we can use for that :

1. spring.stopAnimation(callback) : It will stop the animation and invoke the callback . This callback will hold the final value.
2. spring.addListener(callback) : In this case, callback will be invoked asynchronously. We will get one recent value of the animation with the callback. This is useful if we are processing something based on the current state of the animation.

LayoutAnimation API :

LayoutAnimation doesn’t provides much features like Animated API, but it is useful in many cases. Basically, it will animate the views to their new position on next render. This is useful for flexbox layout updates and also if the changes affects any ancestor view. Normally, we use it by changing the values in a state.

On Android, it will work only if we add the below configuration :

UIManager.setLayoutAnimationEnabledExperimental &&
UIManager.setLayoutAnimationEnabledExperimental(true);

Example :

This is the same example as we have seen above. The only difference is that here we are not using any ‘Animated’ views. Also we are not asking to do one animation for an ‘x’ amount of time. It has one button at the bottom of the animated view. If the user clicks on the button, it increases the width of the button by ’100’ on each click. It animates the changes for that view. Note that we are only updating the state, not directly changing the view. onClickButton method is called on button click. Inside the ‘onClickButton’ method, the below piece of code is doing the magic :

LayoutAnimation.spring();

We are only adding one line of code and that adds the animation to the view. If we have a lot of views, we can store the properties in the state and update the state using ‘LayoutAnimation’ to animate all views simultaneously.

Both ‘LayoutAnimation’ and ‘Animated’ apis are useful in an application. It depends on the use cases. ‘Animated’ is pretty strong but it involves writing a lot of code for any types of animation. But it provides more control to the animation. ‘LayoutAnimation’ is great for doing animation on re-render without writing a lot of code and without changing any views. Just store the view properties in the state and change the state to do the animation.

Conclusion

The article explained how React Native Animation API can be leveraged to develop fabulous application that appeals to masses.

Please feel free to give us your feedback.

Tutorial Index

1. Tutorial #1 – React Native – Introduction
2. Tutorial #2 – React Native Props and State
3. Tutorial #3 – Styling React Native App
4. Tutorial #4 – React Native UI Components
5. Tutorial #5 – React Native API Integration
6. Tutorial #6 – React Native Animation
7. Tutorial #7 – Top 10 React Native libraries