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 :
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.
|
1
2
3
|
import React, { Component } from ‘react’;
import { StyleSheet, View, Animated, Image, Easing } from ‘react-native’;
|
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.
|
1
2
3
4
5
6
7
|
constructor () {
super()
this.RotateValueHolder = new Animated.Value(0);
}
|
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.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
|
StartImageRotateFunction () {
this.RotateValueHolder.setValue(0)
Animated.timing(
this.RotateValueHolder,
{
toValue: 1,
duration: 3000,
easing: Easing.linear
}
).start(() => this.StartImageRotateFunction())
}
|
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.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
render() {
const RotateData = this.RotateValueHolder.interpolate({
inputRange: [0, 1],
outputRange: [‘0deg’, ‘360deg’]
})
return (
);
}
|
5. Create a Animated.Image view inside the Render’s return block.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
render() {
const RotateData = this.RotateValueHolder.interpolate({
inputRange: [0, 1],
outputRange: [‘0deg’, ‘360deg’]
})
return (
<View style={styles.container}>
<Animated.Image
style={{
width: 250,
height: 230,
transform: [{rotate: RotateData}] }}
source={{uri: ‘/wp-content/uploads/2017/10/Butterfly.png’}} />
</View>
);
}
|
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
|
1
2
3
4
5
|
componentDidMount() {
this.StartImageRotateFunction();
}
|
7. Create CSS for main container view.
|
1
2
3
4
5
6
7
8
9
10
|
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’,
backgroundColor: ‘#F5FCFF’,
}
});
|
6. Complete source code for App.js File :
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
|
import React, { Component } from ‘react’;
import { StyleSheet, View, Animated, Image, Easing } from ‘react-native’;
export default class App extends Component<{}> {
constructor () {
super()
this.RotateValueHolder = new Animated.Value(0);
}
componentDidMount() {
this.StartImageRotateFunction();
}
StartImageRotateFunction () {
this.RotateValueHolder.setValue(0)
Animated.timing(
this.RotateValueHolder,
{
toValue: 1,
duration: 3000,
easing: Easing.linear
}
).start(() => this.StartImageRotateFunction())
}
render() {
const RotateData = this.RotateValueHolder.interpolate({
inputRange: [0, 1],
outputRange: [‘0deg’, ‘360deg’]
})
return (
<View style={styles.container}>
<Animated.Image
style={{
width: 250,
height: 230,
transform: [{rotate: RotateData}] }}
source={{uri: ‘/wp-content/uploads/2017/10/Butterfly.png’}} />
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: ‘center’,
alignItems: ‘center’,
backgroundColor: ‘#F5FCFF’,
}
});
|
Screenshot :
Also Read :
React Native Application Life Cycle Methods Explained Example Tutorial
React Native Set Hint PlaceHolder Align Center Inside TextInput
React Native Add Show Header Footer on FlatList in Android iOS Tutorial
Get Current Date With Month And Year in React Native Android iOS
No Component Found for View with name ARTShape React Native iOS Error
