Animate From Left to Right and Right to Left with Transform TranslateX in React Native

// Defining the properties for the CardCashout component

import React, { FC, useEffect, useRef } from 'react';
import { Animated, Text, Easing } from 'react-native';

interface CardCashoutProps {
  openCard: boolean; // A boolean prop that determines whether the card is open or not
}

// Creating the CardCashout functional component

const CardCashout: FC<CardCashoutProps> = ({ openCard }) => {

// Using the useRef hook to maintain a persistent reference to the animated value

const animationRef = useRef(new Animated.Value(openCard ? 0 : 222)).current;

// Using the useEffect hook to manage animation and reactivity

useEffect(() => {

// Defining the target value for the animation based on the ‘openCard’ prop

const targetValue = openCard ? 0 : 222;

// Choosing the easing function for the animation based on the ‘openCard’ prop

const easingFunction = openCard ? Easing.inOut(Easing.ease) : Easing.out(Easing.ease);

// Configuring the animation using the Animated.timing method

  Animated.timing(animationRef, {
    toValue: targetValue, // Setting the target value for the animation
    duration: 5000, // Setting the duration of the animation in milliseconds
    easing: easingFunction, // Applying the chosen easing function
    useNativeDriver: true, // Using the native driver for improved performance
  }).start(); // Starting the animation

}, [openCard, animationRef]); // Dependency array to track changes in 'openCard' and 'animationRef'

// Returning the JSX representing the CardCashout component

 return (
    <Animated.View style={{ transform: [{ translateX: animationRef }] }}>
      <Text>CardCashout</Text>
    </Animated.View>
  );
};

export default CardCashout;

In this code, we have a React Native functional component called CardCashout that facilitates animating a card’s appearance from left to right and vice versa. Let’s break down the key aspects of the code:

Component Properties: The component takes a single property openCard, which is a boolean that indicates whether the card should be open or not.

Animated Value: The useRef hook is employed to create a persistent reference named animationRef to the Animated.Value. This helps maintain the value between re-renders and avoids unnecessary reinitialization.

Animation Logic: The useEffect hook is utilized to manage the animation behavior based on changes in the openCard prop. It calculates the target value for the animation and selects an appropriate easing function (smooth acceleration and deceleration). Then, it configures the animation parameters using the Animated.timing method.

JSX Rendering: The component returns JSX representing an Animated.View. The transform style property is used to apply the animation to the horizontal translation (translateX) of the card. The value is set to the animationRef, which reflects the animated value.

By combining these elements, the CardCashout component effectively animates the card’s transition from left to right and vice versa when the openCard prop changes.