In this tutorial, I will show you how to do image flip animation using react native. If you want to get started just go ahead and copy paste the code. Most part of this tutorial is like other tutorials we have so far.
The big difference is that, in this we have used a new variable to keep track of our animatedValue variable. We need to keep tract it because we need to flip the image based on user interaction. Hence we declared the new variable called currentValue.
To keep track of it, we added an event listener
animatedValue.addListener(({ value }) => {
currentValue = value;
});As the animation goes on, the above function listens to animated value which changes over time and sets the value to currentValue.
const flipAnimation = () => {
if (currentValue >= 90) {
Animated.spring(animatedValue, {
toValue: 0,
tension: 10,
friction: 8,
useNativeDriver: false,
}).start();
} else {
Animated.spring(animatedValue, {
toValue: 180,
tension: 10,
friction: 8,
useNativeDriver: false,
}).start();
}
};As we can keep the track of the animated value with addListener method, now we use them in touch handler function flipAnimation. The above function checks if the angle of degree is more 90 or not. First time, the animation falls in the else code condition since currrentValue is not more 90.
Of course, the interpolation has to happen to get the new animated value.
const setInterpolate = animatedValue.interpolate({
inputRange: [0, 180],
outputRange: ['180deg', '360deg'],
});The input range I have chosen from 0-180 and the out is 180-360deg. You can also do from 0-360 and output 0-360.
import React from 'react';
// import all the components we are going to use
import {
SafeAreaView,
StyleSheet,
View,
Text,
TouchableOpacity,
Animated,
} from 'react-native';
export default FlipImage = () => {
let animatedValue = new Animated.Value(0);
let currentValue = 0;
animatedValue.addListener(({ value }) => {
currentValue = value;
});
const flipAnimation = () => {
if (currentValue >= 90) {
Animated.spring(animatedValue, {
toValue: 0,
tension: 10,
friction: 8,
useNativeDriver: false,
}).start();
} else {
Animated.spring(animatedValue, {
toValue: 180,
tension: 10,
friction: 8,
useNativeDriver: false,
}).start();
}
};
const setInterpolate = animatedValue.interpolate({
inputRange: [0, 180],
outputRange: ['180deg', '360deg'],
});
const rotateYAnimatedStyle = {
transform: [{ rotateY: setInterpolate }],
};
return (
<SafeAreaView style={{ flex: 1 }}>
<View style={styles.container}>
<Text style={styles.titleText}>
React Native Flip Image View Horizontally with Animation
</Text>
<Animated.Image
source={{
uri:
'https://www.dbestech.com/img/mobile.png',
}}
style={[rotateYAnimatedStyle, styles.imageStyle]}
/>
<TouchableOpacity
style={styles.buttonStyle}
onPress={flipAnimation}>
<Text style={styles.buttonTextStyle}>
Click Here To Flip The Image
</Text>
</TouchableOpacity>
</View>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
titleText: {
fontSize: 22,
textAlign: 'center',
fontWeight: 'bold',
},
buttonStyle: {
fontSize: 16,
color: 'white',
backgroundColor: 'green',
padding: 5,
marginTop: 32,
minWidth: 250,
},
buttonTextStyle: {
padding: 5,
color: 'white',
textAlign: 'center',
},
imageStyle: {
width:"80%",
height:"50%",
borderRadius: 6,
},
});
Build a mobile app with Laravel Backend
