Last Updated on December 13, 2020.
In this React Native tutorial, I show you how to rotate an image continuously in React Native. For Animation, we have to use Animated library from React Native.
In the componentDidMount lifecycle Animated.loop is used to continue the animation as a loop. We also set Animated.Value as 0 in the state.
Animated.timing is used to animate a value over time using easing functions. The duration of animation and easing type are given here. Setting useNativeDriver to be true makes your animation smooth in Android platform as well as iOS platform.
I have also used interpolate function to map input range to different output range. Animated.Image makes a football spinning indefinitely in the code given below.
Class based component
import React, { Component } from 'react';
import { View,Animated, Easing } from 'react-native';
export default class webviewWithLoading extends Component {
constructor(props) {
super(props);
this.state = { spinAnim: new Animated.Value(0) }
}
componentDidMount(){
Animated.loop(Animated.timing(
this.state.spinAnim,
{
toValue: 1,
duration: 3000,
easing: Easing.linear,
useNativeDriver: true
}
)).start();
}
render() {
const spin = this.state.spinAnim.interpolate({
inputRange: [0, 1],
outputRange: ['0deg', '360deg']
});
return (
<View style={{ flex: 1, justifyContent:'center', alignItems:'center' }}>
<Animated.Image
style={{height:100, width: 100,transform: [{rotate: spin}] }}
source={{uri: 'https://cdn.pixabay.com/photo/2013/07/13/10/51/football-157930_960_720.png'}} />
</View>
);
}
}
Function based component
import React, {useState, useEffect} from 'react';
import {View, Animated, Easing} from 'react-native';
const App = () => {
const [spinAnim, setSpinAnim] = useState(new Animated.Value(0));
const spin = spinAnim.interpolate({
inputRange: [0, 1],
outputRange: ['0deg', '360deg'],
});
useEffect(() => {
Animated.loop(
Animated.timing(spinAnim, {
toValue: 1,
duration: 3000,
easing: Easing.linear,
useNativeDriver: true,
}),
).start();
});
return (
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
<Animated.Image
style={{height: 100, width: 100, transform: [{rotate: spin}]}}
source={{
uri:
'https://cdn.pixabay.com/photo/2013/07/13/10/51/football-157930_960_720.png',
}}
/>
</View>
);
};
export default App;
The ouput is shown below:

For more information on animation in react native go here.
Pingback: How to Rotate an Image in React Native - REACT NATIVE FOR YOU
Pingback: React Native Animation Tutorial Series (Part 7): React Native Interpolation Example - REACT NATIVE FOR YOU