Flip image animation effect is a cool way to present your images. In this tutorial, we will create a flip image animation effect in React Native.

Step 1: Create a new React Native project

npx react-native init FlipImageAnimation
cd FlipImageAnimation

Step 2: Install the required dependencies

npm install react-native-animatable

Step 3: Create a new component

import React, { useRef } from ‘react’;
import { View, Image, Animated } from ‘react-native’;
import { PanGestureHandler, State } from ‘react-native-gesture-handler’;
const FlipImageAnimation = () => {
const animation = useRef(new Animated.Value(0)).current;
const onGestureEvent = Animated.event(
[
{
nativeEvent: {
translationX: animation,
},
},
],
{ useNativeDriver: true }
);
const onHandlerStateChange = (event) => {
if (event.nativeEvent.oldState === State.ACTIVE) {
Animated.timing(animation, {
toValue: 0,
duration: 1000,
useNativeDriver: true,
}).start();
}
};
return (

);
};
export default FlipImageAnimation;

Step 4: Run the app

npx react-native run-ios

Step 5: Test the app