React Native Flip Image Card View Horizontally Using Animation Android iOS Example Tutorial

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.

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.

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.

4. Create aĀ SetInterpolate method and set animation input and output range in render’s block.

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.

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.

7. Create a button usingĀ TouchableOpacity inside the root view, we would call theĀ flip_Card_Animation() function on button onPress event.

8. Creating Style.

9. Complete source code forĀ App.jsĀ File :

Screenshot in Android device:

Flip Image Card View Horizontally Using AnimationScreenshot in iOS device :

5 Comments

  1. Awesome and pretty clear! Any way to do this but flip between two images?

  2. Hello,nice share.

Leave a Reply

Your email address will not be published. Required fields are marked *