React Native Animation

Working on animation with React Native

1. Reanimated 2 is a powerful library that allows for high-performance animations and declarative UI animations.
2. To create animations with React Native using the Reanimated library, you'll need to follow these steps.

Installation

First, make sure you have a React Native project set up. If you don't, you can create one using

“npx react-native init YourProjectName”

Install Reanimated

“npm install react-native-reanimated”

“npx react-native link react-native-reanimated” - (for RN version <= 0.60)

How to use Reanimate

In Reanimated 2, you can create animated components using the withSpring, withTiming, and other animation functions.

Here's an example of how to create a simple animated button component:

import React from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import Animated, { Easing, withSpring } from 'react-native-reanimated';

const App = () => {
  const translateY = new Animated.Value(0);
  const opacity = new Animated.Value(1);

  const handlePress = () => {
    Animated.timing(translateY, {
      toValue: 100,
      duration: 500,
      easing: Easing.linear,
    }).start();
    Animated.timing(opacity, {
      toValue: 0,
      duration: 500,
      easing: Easing.linear,
    }).start();
  };
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Animated.View
        style={{
          transform: [{ translateY }],
          opacity,
        }}
      >
        <Text style={{ fontSize: 20 }}>Reanimated Button</Text>
      </Animated.View>
      <TouchableOpacity onPress={handlePress}>
        <View
          style={{
            backgroundColor: 'blue',
            padding: 10,
            borderRadius: 5,
          }}
        >
          <Text style={{ color: 'white' }}>Press Me</Text>
        </View>
      </TouchableOpacity>
    </View>
  );
};
export default App;

Explanation:-

1. In the above example “translateY” and “opacity” are the two variables containing the initial value of the animation. As these values are going to change over a given time during the animation, we have given the value as “Animated.Value()”.
Note: Normal values like 0 or 1 will not work and will give errors during the animation, so can't be used.

2. “timing” is a method provided by “Animated from the ”react-native-reanimated" package, which will do the animation over a given time. It accepts two parameters

1. Animated value that we want to change (variable having initial animated value:-
   Animated.Value(<some value e.g 0,  1, 10>))
2. Properties object. Some of the properties are
   1. toValue - the final value that we want to animate/reach to.
   2. duration - the duration in, milliseconds over which the animation(value change from initial value to toValue) should happen.
   3. easing - the type of effect on the animation we want.

3. The “start()" method will start the animation immediately after it gets called.

  const translateY = new Animated.Value(0);
  Animated.timing(translateY, {
   toValue: 100,
   duration: 500,
   easing: Easing.linear,
  }).start();

In the above method, we are trying to do an animation that will change the value of translateY from 0 to 100 over a 500 millisecond time duration with a linear easing effect.

Testing on a Real Device or Emulator

Make sure you test your animations on a real device or emulator to get an accurate performance evaluation. The Reanimated library is designed for high-performance animations, and real-world testing will help you fine-tune your animations.