React Native Animation: Building Play/Pause Controls with Lottie in React Native

In mobile app development, adding animations can greatly enhance the user experience by making the app more engaging and dynamic. React Native provides various libraries and tools to incorporate animations seamlessly into your application. One such popular library is Lottie, which allows you to integrate Adobe After Effects animations into your React Native projects effortlessly.

In this tutorial, we'll learn how to create a simple yet powerful animated button in React Native to start and stop animations using the Lottie library. By the end of this tutorial, you'll have a clear understanding of how to control animations dynamically based on user interactions.

Prerequisites:
Before diving into this tutorial, you should have a basic understanding of React Native and how to set up a development environment. Make sure you have Node.js and npm (or yarn) installed on your machine.

Step1: Setting Up the Project
To learn how to set up visit this link project-setup.

Step2: Install the Lottie library: lottie-react-native.

If you don’t have any lottie animation then download it from the lottie website. Here are some free-lottie-animations you can visit. Note you have to download the json of it.

Step3:
Move your animation json file inside the assets folder. In my case I created a new directory inside the assets name called animation and inside of it I moved my json file.

Step4: Creating the Screen Page and adding button element to run functioning the animation.

// HomeScreen.tsx

import LottieView from "lottie-react-native";
import { Fragment, useRef, useState } from "react";
import { Button, Dimensions, StyleSheet, Text, View } from "react-native";

export default function HomeScreen() {
  const [playPause, setPlayPause] = useState<string>("play");
  const animationRef = useRef<LottieView>(null);

  const runAnimation = (mode: string) => {
    if (mode === "play") {
      animationRef?.current?.play();
    }

    if (mode === "pause") {
      animationRef?.current?.pause();
    }
  };

  return (
    <Fragment>
      <View style={styles.container}>
        <View style={styles.animationBox}>
          <LottieView
            ref={animationRef}
            source={require("../../assets/animation/animation_1.json")}
            autoPlay={false}
            loop={false}
            style={{
              width: Dimensions.get("window").width - 100,
              height: Dimensions.get("window").height - 20,
            }}
          />
        </View>
        <View style={styles.btnBox}>
          <Button onPress={() => runAnimation("play")} title={"Start"} />
          <Button onPress={() => runAnimation("pause")} title={"Pause"} />
        </View>
      </View>
    </Fragment>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
  animationBox: {
    flex: 0.7,
    width: "100%",
    justifyContent: "center",
    alignItems: "center",
  },
  btnBox: {
    flex: 0.3,
    width: "50%",
    flexDirection: "row",
    justifyContent: "space-evenly",
    alignItems: "center",
  },
  btn: {
    width: "50%",
  },
});

Output:

Conclusion:
In this guide, we've explored the integration of Lottie animations within React Native applications, focusing specifically on implementing play and pause controls. Leveraging the Lottie library, we've crafted a user-friendly animated button component capable of dynamically initiating and halting animations based on user interaction.