Ringing call icon Animation with React Native

so in this artical we will learn how can we create this ringing calling icon with React Native Animation,

Step 1, import some items from react native like, View, Animated and Easing

Importing item

now declare a variable with assign Animated.value 0

you can name it what ever you want , just take care about naming convention , that important and its good practice .

now create a simple function and inside it call Animated.timing() this function will take 2 arguments 1 is variable which we declare earlier and second is object for config the animation , {“toValue 1”,“duration 1000” “easing Easing.linear” , “useNativeDriver true”

animated function

now do last thing declare a variable spin_ with interpolate take object as argument and we define in this object the rang for animation stages and what is the purpose at that rang, when animated start at 0 rang the div will de at 0 deg at 0.5 rang the div will rotate 20deg and at 1 which is last stage the div will rotate back to 0 deg , here im calling div is View which we will see in later ,

set range

now let go to our render method to display the view

animated view

we create a Animated.View and style it with transform rotate and give this rotate a variable called spin_ which we assign earlier,this variable give the outrange value at 0,0.5 and 1 stage , and inside i just declare an image for icon,

now lets talk about what this function will do , at start function will assign value 0 to our spineValue variable. then it start the duration and on complete one time it will assign value 1 to out spineValue variable then we call .start method and this method will take this function as a argument its show that when the duration is complete recall the function , and it will continuously animate when you are on same screen and when you shift from this screen the animation will stop automatically.

you can support me on my youtube channel , hope you learn from this.