React Native Animation Guide

is an interesting topic56 where a dull application could be converted into an interactive and beautiful app. When you first into an application, the thing which impresses us the most is interface and its interactivity. Working with animations could look a bit overwhelming at first but it is essentially a process of just 3 steps. React Native Animation login Create a reference variable of Animated.Value Change the value of this reference variable using Animated.Spring or Animated.Timing function. Create interpolation of this reference variable in styles of component to animate. Introduction In this guide you will learn about the basic principles of React Native animation. I have divided it into two sections. If you are a complete beginner, you can get ready to play with animations quickly by having minimal but most important information by going through section 1. But if you want to learn more, then feel free to proceed to section 2. After completing the first section, you will be able to work with animations. Happy animations & let’s get started. Before you begin This guide won’t teach you the concepts of React Native, else it will teach you react native animations. So, a prior knowledge of React Native is required. This article is written for version 0.63. Section 1 – Essentials of React Native animation In this section, I included the three essential steps to work with animations. After completing this, you will be able to run animations in your app. Create a reference variable of Animated.Value The first step involves the creation of animation variable. This variable defines the styling on the component throughout the whole animation lifecycle. animationVariable = useRef( Animated.Value( )).current; const new 0 I am setting the variable, animationVariable with initial value of 0. This is it. Step completed. Change the value of animationVariable using Animated.Spring or Animated.Timing function Since our variable is already defined, we now need a way to change the value of it. Because the change in this value derives the changes in the style properties of components which ultimately animates them. Why the animationVariable value needs to be changed? For example, suppose an image needs to be scaled twice its size. We can do that by changing the value of animationVariable and interpolate the changes with the amount of scaling we require. Not understood? Worry not, we will see that in third step. To change the value of animation variable, we use and functions of Animated component. Spring Timing Animated.spring(animationVariable, { : , : , }).start(); toValue 1 useNativeDriver true Code Explanation – - This is the prebuilt function by React-Native to change the value of variable in a manner so that it gives the feel of spring while changing style values. Check other animation function . Animated.spring here - It indicates the new value for our animationVariable. Remember, we set it to 0 in first step? Now the spring function will change it to 1. toValue - In React Native, our app runs on native thread and JS thread. Using this option will run our animation on native thread which will improve the performance. The only drawback is that few styles are supporting native drivers, as of now. Check the list of all supporting styles below. useNativeDriver - Calling start will run the animation. Means, animationVariable value will change from 0 to 1 in spring form within the time period defined by React-Native in Animated.spring method. start Create interpolation of animationVariable in styles of component to animate Now we will use this animationVariable to change the style of component according to how we wish to animate it. Like in our earlier example, if we want to scale an Image or a View, we will do – transform scale inputRange 0 1 outputRange 1 2 Animated.View Code Explanation - - No, you can’t run animation on simple components. You need special components provided by Animated component. So, we are using Animated.View. You can read more about it in below sections. Animated.View - Interpolate converts the animationVariable value into the required scale value. interpolate - It defines the range of value for animationVariable. Here it is changing from 0 to 1. inputRange - It is defining the value of scale for the corresponding animationVariable value. So, when animationVariable is 0, scale will be 1. When it is 1, scale will be 2. outputRange Now you know how React Native animation works. Here is an infographic to clear your understandings further. Working Example React, {useRef} ; {Animated, Button, View} ; App = { animationValue = useRef( Animated.Value( )).current; runAnimationOnClick = { Animated.spring(animationValue, { : , : , }).start(); } ( <Animated.View style = {{ height: 200, width: 200, backgroundColor: 'red', transform: [ { scale: animationValue.interpolate({ inputRange: [0, 1], outputRange: [1, 2], }), }, ], }} /> ); } export default App; import from 'react' import from 'react-native' const => () const new 0 const => () toValue 1 useNativeDriver true return View End of Section 1 In this tutorial we learned the three basic steps of working with React Native animation. First we create the animation variable. Second, we change the value of variable using spring or timing function. Third, we interpolate the variable into useful style values. Section 2 – If you want to learn more about React Native animation 1. You can initialize any value for your animationVariable. We set 0 but doesn’t mean you have to do the same. 2. There are in total in react native which could be animated – , , , , , . 6 components Animated.View Animated.Image Animated.Text Animated.ScrollView Animated.FlatList Animated.SectionList 3. There are few types of animation function like , and . Code snippets for these animation function are – Animated.timing() Animated.spring() Animated.decay() Animated.timing(animationValue, { : , : Easing.back(), : , : , }).start( {}); toValue 1 easing duration 2000 useNativeDriver true ( ) => {finished} : React Native says that the default value of useNativeDriver is false, but actually you need to provide this property otherwise debugger will crash. Note defines the type of animation you want like bouncing, easeIn, easeOut, elastic etc. Easing parameter in start function helps in determining whether the animation is completed successfully or not. Because the function within start acts as a callback. It gets called either when animation got completed or interrupted in the middle. So, in case when you want to run something only when animation is completed, there you can use finished property within if condition. {finished} defines how long will it take to change the value of animationValue from current to toValue. Like, in our case it will take 2000 ms (2 seconds) to change animationValue from 0 to 1. duration Overall in summary, our animation will run for 2 seconds using easing.back (it will run the animation in opposite direction a bit and then move forward. Think of it like Lion taking few steps back before jumping. So, suppose you use this animation for scaling a View from 1 to 2 then the View first scale down a bit and then go to 2). 4. Sometimes you feel the need to combine animations together. For example, suppose you want to show 3 buttons in fadeIn style where 2nd button will start showing up only when first has reached half opacity. So, it will give the illusion of appearing buttons but with a delay. I will show this effect with code demo. There are 4 provided by React Native – , , , . composing animations Animated.delay() Animated.parallel() Animated.sequence() Animated.stagger() 5. is used to run different animations one after the other. So, suppose there are three boxes and you want to move them one after the other then we will use Animated.sequence(). See this code – Animated.sequence() Animated.sequence([ Animated.timing(box1AnimationVariable, { : , : , : , }), Animated.timing(box2AnimationVariable, { : , : , : , }), ]).start() toValue 1 duration 1000 useNativeDriver true toValue 1 duration 1000 useNativeDriver true 6. is used with Animated.sequence and its purpose is to add a delay between two animations. For example, if you want to move the blue box after 1 second of completion of red box. Check this code snippet – Animated.delay() Animated.sequence([ Animated.timing(box1AnimationVariable, { : , : , : , }), Animated.delay( ), Animated.timing(box2AnimationVariable, { : , : , : , }), ]).start() toValue 1 duration 1000 useNativeDriver true 1000 toValue 1 duration 1000 useNativeDriver true 7. is similar to Animated.sequence() but here all the animations will run at the same time. Check out this code – Animated.parallel() Animated.parallel([ Animated.timing(box1AnimationVariable, { : , : , : , }), Animated.timing(box2AnimationVariable, { : , : , : , }), ]).start() toValue 1 duration 1000 useNativeDriver true toValue 1 duration 1000 useNativeDriver true 8. is pretty interesting. It runs the animations in parallel but with a fixed delay. Like the second animation will start after the provided delay of starting of first animation. Check the code – Animated.stagger() Animated.stagger( , [ Animated.timing(box1AnimationVariable, { : , : , : , }), Animated.timing(box2AnimationVariable, { : , : , : , }), ]).start() 200 toValue 1 duration 1000 useNativeDriver true toValue 1 duration 1000 useNativeDriver true Code snippet for the example is – button fading * React ; { Animated, View, Button, Text, TouchableHighlight } ; { button1AnimationValue = React.useRef( Animated.Value( )).current; button2AnimationValue = React.useRef( Animated.Value( )).current; button3AnimationValue = React.useRef( Animated.Value( )).current; buttonPressed = { button1AnimationValue.setValue( ); button2AnimationValue.setValue( ); button3AnimationValue.setValue( ); Animated.stagger( , [ Animated.timing(button1AnimationValue, { : , : , : , }), Animated.timing(button2AnimationValue, { : , : , : , }), Animated.timing(button3AnimationValue, { : , : , : , }), ]).start( {}) } ( Total fadein animation completes in 300ms but there is staggering delay of 100ms. So, second button will start fading in after 100ms of first button. ); } import as from 'react' import from 'react-native' export default ( ) function App const new 0 const new 0 const new 0 const => () 0 0 0 100 toValue 1 duration 300 useNativeDriver true toValue 1 duration 300 useNativeDriver true toValue 1 duration 300 useNativeDriver true ( ) => {finished} return View style {{alignItems: center 9. You can set only in case of few styles like , , , but you can’t use native drivers for changing width and height of the components. In that case you will have to set it to false. useNativeDriver: true translate scale rotate opacity 10. interpolate can be used for some non-numeric output ranges. For example, you can use it over colors and angles range. Check the code below – backgroundColor: animationValue.interpolate({ : [ , ], : [ , ], }), inputRange 0 1 outputRange 'rgb(255,0,0)' 'rgb(0,0,255)' This interpolation will change the background color from red to blue by passing through different color ranges in between. Another example of interpolation of angles might look like this – rotateX: animationValue.interpolate({ : [ , ], : [ , ], }), inputRange 0 1 outputRange '0deg' '90deg' This interpolation will rotate the component in x direction from 0deg to 90deg. That’s it, we reached the end. In this article we learned about how react native animation works and what are the different functions we need to remember. If you want to gain more in depth knowledge about each topic, you can refer to the official documentation of React Native from here – https://reactnative.dev/docs/animations Previously published at https://www.akashmittal.com/react-native-animation-easy-step-by-step-guide/