Flipping is a technique used to rotate a image horizontally without changing its shape and pixels, its like mirror effect in react native. Flipping is used in mostly photo editing applications which gives us the functionality to flip the image horizontally and vertically. You have seen in many mobile cameras when we capture the image it will automatically flipped the image. So in this tutorial we would going to implement React Native dynamically Flip Image Card View Horizontally Using Animation in both Android and iOS applications example tutorial.
Live Screenshot of App:
Note: Above GIF image is grater than 4 MB, so it should take some time to loading depending to your internet speed .
Contents in this project Flip Image Card View Horizontally Using Animation Android iOS React Native App Example Tutorial:
1. Import StyleSheet, View, Text, TouchableOpacity and Animated component in your project.
|
1
2
3
|
import React, { Component } from ‘react’;
import { StyleSheet, View, Text, TouchableOpacity, Animated } from ‘react-native’;
|
2. Create constructor() in your class, Now we would make this.animatedValue and makes it default animated values as 0(zero), create a this.value variable and initialize it with zero and apply the addListener() on this.animatedValue.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
constructor(){
super();
this.animatedValue = new Animated.Value(0);
this.value = 0;
this.animatedValue.addListener(({ value }) => {
this.value = value;
})
}
|
3. Create a function named as flip_Card_Animation() and inside this function we would toggle – change the animated value using Spring animation function.
toValue : Animated the final value.
tension : Controls the speed of animation and default is 40.
friction : Controls “bounciness”/overshoot in animation and Default is 7.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
flip_Card_Animation=()=> {
if (this.value >= 90) {
Animated.spring(this.animatedValue,{
toValue: 0,
tension: 10,
friction: 8,
}).start();
} else {
Animated.spring(this.animatedValue,{
toValue: 180,
tension: 10,
friction: 8,
}).start();
}
}
|
4. Create a SetInterpolate method and set animation input and output range in render’s block.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
render() {
this.SetInterpolate = this.animatedValue.interpolate({
inputRange: [0, 180],
outputRange: [‘180deg’, ‘360deg’]
})
return (
);
}
|
5. Create a constant named as Rotate_Y_AnimatedStyle. Now inside this we would rotate/flip the image or view at Y AXIS using transform.
|
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
|
render() {
this.SetInterpolate = this.animatedValue.interpolate({
inputRange: [0, 180],
outputRange: [‘180deg’, ‘360deg’]
})
const Rotate_Y_AnimatedStyle = {
transform: [
{ rotateY: this.SetInterpolate }
]
}
return (
);
}
|
6. Create a Root View in render’s return block and we would make a <Animated.Image> View component to animate the flipping animation on image component. If you need you can also animate a complete view using <Animated.View> component.
|
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
|
render() {
this.SetInterpolate = this.animatedValue.interpolate({
inputRange: [0, 180],
outputRange: [‘180deg’, ‘360deg’]
})
const Rotate_Y_AnimatedStyle = {
transform: [
{ rotateY: this.SetInterpolate }
]
}
return (
<View style={styles.MainContainer}>
<Animated.Image source={{uri : ‘/wp-content/uploads/2018/02/motorcycle.jpg’}}
style={[Rotate_Y_AnimatedStyle, styles.imageViewStyle]}>
</Animated.Image>
</View>
);
}
|
7. Create a button using TouchableOpacity inside the root view, we would call the flip_Card_Animation() function on button onPress event.
|
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
|
render() {
this.SetInterpolate = this.animatedValue.interpolate({
inputRange: [0, 180],
outputRange: [‘180deg’, ‘360deg’]
})
const Rotate_Y_AnimatedStyle = {
transform: [
{ rotateY: this.SetInterpolate }
]
}
return (
<View style={styles.MainContainer}>
<Animated.Image source={{uri : ‘/wp-content/uploads/2018/02/motorcycle.jpg’}}
style={[Rotate_Y_AnimatedStyle, styles.imageViewStyle]}>
</Animated.Image>
<TouchableOpacity style={styles.TouchableOpacity_button} onPress={this.flip_Card_Animation} >
<Text style={styles.TextStyle}> Click Here Flip </Text>
</TouchableOpacity>
</View>
);
}
|
8. Creating Style.
|
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
|
const styles = StyleSheet.create({
MainContainer: {
flex: 1,
alignItems: “center”,
justifyContent: “center”,
},
imageViewStyle: {
width: 240,
height: 300,
borderRadius:6,
},
TouchableOpacity_button: {
width: ‘80%’,
backgroundColor: ‘#00BCD4’,
borderRadius:6,
marginTop: 20
},
TextStyle:{
color:‘#fff’,
textAlign:‘center’,
padding: 5,
fontSize: 18
}
});
|
9. 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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
|
import React, { Component } from ‘react’;
import { StyleSheet, View, Text, TouchableOpacity, Animated } from ‘react-native’;
export default class AppProject extends Component
{
constructor(){
super();
this.animatedValue = new Animated.Value(0);
this.value = 0;
this.animatedValue.addListener(({ value }) => {
this.value = value;
})
}
flip_Card_Animation=()=> {
if (this.value >= 90) {
Animated.spring(this.animatedValue,{
toValue: 0,
tension: 10,
friction: 8,
}).start();
} else {
Animated.spring(this.animatedValue,{
toValue: 180,
tension: 10,
friction: 8,
}).start();
}
}
render() {
this.SetInterpolate = this.animatedValue.interpolate({
inputRange: [0, 180],
outputRange: [‘180deg’, ‘360deg’]
})
const Rotate_Y_AnimatedStyle = {
transform: [
{ rotateY: this.SetInterpolate }
]
}
return (
<View style={styles.MainContainer}>
<Animated.Image source={{uri : ‘/wp-content/uploads/2018/02/motorcycle.jpg’}}
style={[Rotate_Y_AnimatedStyle, styles.imageViewStyle]}>
</Animated.Image>
<TouchableOpacity style={styles.TouchableOpacity_button} onPress={this.flip_Card_Animation} >
<Text style={styles.TextStyle}> Click Here Flip </Text>
</TouchableOpacity>
</View>
);
}
}
const styles = StyleSheet.create({
MainContainer: {
flex: 1,
alignItems: “center”,
justifyContent: “center”,
},
imageViewStyle: {
width: 240,
height: 300,
borderRadius:6,
},
TouchableOpacity_button: {
width: ‘80%’,
backgroundColor: ‘#00BCD4’,
borderRadius:6,
marginTop: 20
},
TextStyle:{
color:‘#fff’,
textAlign:‘center’,
padding: 5,
fontSize: 18
}
});
|
Screenshot in Android device:
Screenshot in iOS device :
Also Read :
Dynamically Add Values in String Array List in React Native on button click
React Native Load Local HTML File Place Inside App in WebView
Use useEffect as componentwillunmount in React Native Hooks Example
No Component Found for View with name ARTShape React Native iOS Error
React Native Creating Card View in Android iOS App Example Tutorial
