React Native Flip Image with Animation Example

React Native

Nicesnippets

137

20-11-2021


React Native Flip Image with Animation Example

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...


Recommended Posts