How to build Simple Card Flip Animation in React Native using ReAnimated V2.

Introduction

We know that movings things catch our attention, and the same goes for apps.
Animations can catch users' attention and also give them delight.
Today I will explain how to build simple yet cool card flip animation, which can help you get started with Animations in react native.
We will be using Reanimated for this.

What is Reanimated?

Reanimated is a powerful and flexible API for animating components in React Native. It provides a low-level, declarative approach to animations that allows us, developers, to create complex and engaging animations with a minimal amount of code. Unlike other animation libraries for React Native, Reanimated uses the native animation capabilities of the host platform, resulting in smooth and performant 60fps animations. In this introduction Example, we will explore its core concepts, and how to use them.

Let's get started.

We first need to create two Views of a card let's call them F=FrontView and B=BackView and we need to position F behind B using Absolute position. We will be using Animated Views so that we can pass them animated styles later.

Let us create basic cards and styles for them. You can style your cards however you like.

<Animated.View style={[Styles.front]>
  <Text>Front View</Text>
</Animated.View>
<Animated.View style={[Styles.back]}>
  <Text>Back View</Text>
</Animated.View>

 front: {
   height: 400,
   width: 250,
   backgroundColor: "#D8D9CF",
   borderRadius: 16,
   position: "absolute",
   alignItems: "center",
   justifyContent: "center",
},
 back: {
   height: 400,
   width: 250,
   backgroundColor: "#FF8787",
   borderRadius: 16,
   backfaceVisibility: "hidden",
   alignItems: "center",
   justifyContent: "center",
 },

Now let us understand what we need to do to achieve the animation.

• the Back initial position will already be rotated to 180, with backfaceVisibility set to hidden so it is not visible at the start,

• rotate the Front Card from 0 to 180,

• and at the same time rotate the Back View from 180 to 360,

• once step 2 and step 3 are done simultaneously It will create a nice flip-rotate animation for us.

A basic illustration of what we need to do.

Now let's create a shared Value that we will use to drive our animation.
Shared values are variables as the name suggests that are shared b/w UI thread and JS Thread
Learn more about them here.