Creating an Animated Button in React Native with Lottie
Tags: reactnative, lottieanimation, react, animation
Published: 2024-05-16 07:20:58

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]((https://reactnative.dev/docs/environment-setup)).

**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](https://lottiefiles.com/featured). 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:
```js
// 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:
![output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iydtmwea8dqpn3hb0ttz.gif)

**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!