04-Apr-2023
.
Admin
Hi Guys,
In this tutorial, I will learn you how to implement image flip with animation in your app using react native.
Here, i will give you complete example for flip an image with animation using react native as bellow.
Step 1 - Create project
In the first step Run the following command for create project.
expo init nicesnippetsApp
Step 2 - App.js
In this step, You will open App.js file and put the code.
import React from 'react';
import { SafeAreaView, StyleSheet, View, Text, TouchableOpacity, Animated } from 'react-native';
const nicesnippetsApp = () => {
let animatedValue = new Animated.Value(0);
let currentValue = 0;
animatedValue.addListener(({ value }) => {
currentValue = value;
});
const flipImageAnimation = () => {
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}>
<Animated.Image
source={{
uri: 'https://www.nicesnippets.com/image/imgpsh_fullsize.png',
}}
style={[rotateYAnimatedStyle, styles.imageStyle]}
/>
<TouchableOpacity
style={styles.buttonStyle}
onPress={flipImageAnimation}>
<Text style={styles.buttonTextStyle}>
Flip The Image
</Text>
</TouchableOpacity>
</View>
</SafeAreaView>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center',
justifyContent: 'center',
},
buttonStyle: {
backgroundColor: 'black',
padding: 5,
marginTop: 32,
minWidth: 200,
},
buttonTextStyle: {
padding: 5,
color: 'white',
textAlign: 'center',
},
imageStyle: {
width: 150,
height: 150,
borderRadius: 6,
},
});
export default nicesnippetsApp;
Step 3 - Run project
In the last step run your project using bellow command.
npm start
Output
It will help you...
#React Native