Creating an Animated Button in React Native with Lottie

Adding animations can significantly enhance the user experience of a mobile app, making it more engaging and dynamic. React Native provides various libraries and tools to incorporate animations seamlessly. 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.

Steps to Create an Animated Button

Step 1: Setting Up the Project
First, set up your React Native project. If you need help setting up, refer to the React Native environment setup guide.

Step 2: Install the Lottie Library
Install the Lottie library using npm or yarn:

npm install lottie-react-native

For iOS, you also need to install the pod:

cd ios
pod install

Step 3: Download Lottie Animation
If you don’t have any Lottie animations, you can download them from the LottieFiles website. Make sure to download the JSON file of the animation.

Step 4: Move the Animation File
Move your animation JSON file inside the assets folder of your project. In this example, we create a new directory called animation inside the assets folder and place the JSON file there.

project-root/
└── assets/
    └── animation/
        └── animation_1.json

Step 5: Create the HomeScreen Component
Now, let's create a screen with a button that can control the animation. Here’s how you can do it:

// 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
Here's what the output should look like:

Conclusion
In this guide, we've explored how to integrate 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.

Feel free to experiment with different animations and expand the functionality of your app by adding more interactive elements. Happy coding!