React Native Rotate Image View Using Animation Android iOS Tutorial

Image spinning animation also known as Image – View rotating animated is basically used to create Custom Circular Loading Progress bar, Indicators like Activity Indicators, Wheel spinning animation and any other functionality that needs to be spin infinitely. So in this tutorial we would going to react native application for both Android and iOS devices with a Rotate Image animation View. Now when application loads it will start spinning the Image and the image would spin¬†infinitely using Recursive Function technique. So let’s get started ūüôā .

Live Screenshot :

Rotate Image

Contents in this project Rotate Image View Using Animation in React Native Example :

1. Import StyleSheet, View, Animated, Image and Easing component in your project.

2. Create A variable inside the constructor and set rotate value using animation value. We would set the RotateValueHolder  value using Animated set its default value as Zero.

3. Create a function named as StartImageRotateFunction(), This function is our main animation function and all the animation would create and control  using this method.

this.RotateValueHolder.setValue(0) :  Set the Spin РRotate value to Zero.

Animated.timing : This function would used to set the animation timing which would start from 0 to 3000 milliseconds.

easing : It is used to set easing . There are also ease, sin, back, elastic, linear, bounce, quad, bezier, cubic, in and out type easing present in React native animated API.

Now as you can see in above code we will recursively calling the StartImageRotateFunction() in start ( () => ) method. So by calling this it will spin for infinite time. If you want to stop the spin after 1 round then remove the function from start ( () => ) method.

4. Create a constant variable named as RotateData inside the Render’s block . This would tell us the Spin animation range, means from which degree we we have to start rotating the Image.

5. Create a Animated.Image view inside the Render’s return block.

6. Now create a componentDidMount() method inside your class just after constructor. Call the StartImageRotateFunction() function inside it. The componentDidMount() function is a inbuilt function of React Native and execute

7. Create CSS for main container view.

6. Complete source code for App.js File :

Screenshot :

Leave a Reply

Your email address will not be published.