React Native Tutorial: How to Implement a Celebration Confetti Burst
Tags: reactnative, tutorial, ux, programming
Published: 2023-09-19 12:56:13

Recently, I embarked on a mission to add a splash of joy — a confetti burst — to celebrate the special moments users experience in my React Native app, such as when they complete a challenging Sudoku puzzle. Available on [iOS](https://apps.apple.com/us/app/enjoy-sudoku/id6466218894) and [Android](https://play.google.com/store/apps/details?id=com.barrymichaeldoyle.sudoku).

![Sudoku Confetti Example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g13puk5xvcgl46l182wt.gif)

> This GIF doesn't do it justice; it looks significantly better on native devices! 😉

## The Journey

Despite my excitement, finding the perfect library for the confetti burst proved a bit of a challenge as many libraries were outdated or didn't deliver the smooth result I envisioned. However, fortune smiled on me when I stumbled upon a golden suggestion on Reddit.

## The Solution: Lottie

A simple yet game-changing comment on Reddit introduced me to Lottie:

> "Why not use Lottie?"

Further research led me to [LottieFiles](https://lottiefiles.com/) (not sponsored) — a haven for animation enthusiasts offering a myriad of free animations, including a variety of [confetti animations](https://lottiefiles.com/search?q=confetti&category=animations) ready to be used. To integrate these animations in a React Native app, the  [lottie-react-native](https://github.com/lottie-react-native/lottie-react-native) library comes in handy.

## Tutorial: Using Lottie with React Native

With LottieFiles and the `lottie-react-native` library at our disposal, it's time to implement a joyous confetti burst in a React Native app. Let's delve into the step-by-step guide:

### Step 1: Set up the React Native App

Create a new empty React Native app. In your `App.tsx` file (I love TypeScript), add a button that will later trigger the confetti animation.

```tsx
import { StyleSheet, Button, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Button title='Trigger' />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});
```

![Empty screen with a useless button](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ndmkd8tgbi5e1ffw031b.png)

### Step 2: Select and Download a Confetti Animation

Head to LottieFiles and select a confetti animation that catches your eye. I chose [this vibrant one](https://lottiefiles.com/animations/confetti-ENxSnLhOBl).

Download the Lottie JSON file.

![Download Lottie JSON](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ow5wyeqxz0nhemjl9urg.png)

### Step 3: Integrate the Animation into Your Project

Rename the downloaded file to `confetti.json` and move it to the `assets` folder in your project.

![VSCode Screenshot with assets](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s8kj137xkrfwoimsomzk.png)

### Step 4: Install the Lottie Library

Install the `lottie-react-native` library using the following command:

```
npm install lottie-react-native
```

### Step 5: Implement the LottieView Component

In this crucial step, we'll add the LottieView component to our app and set up an event handler to initiate the animation when the button is pressed. Let's break down the code to understand each part:

**Importing and Setting Up LottieView**

We start by importing the `LottieView` component from the `lottie-react-native` library, which is used to render the Lottie animations in your React Native app.

```tsx
import LottieView from 'lottie-react-native';
```

**Using useRef Hook**

Next, we utilize the `useRef` hook to create a mutable object, which holds the `.current` property initialized with the `LottieView` component. This `.current` property will allow us to access the `LottieView` methods, like `.play()`, later in our `triggerConfetti` function.

```tsx
const confettiRef = useRef<LottieView>(null);
```

**Creating the triggerConfetti Function**

We create a function called `triggerConfetti` to play the Lottie animation from its start when it's called, giving us the control to initiate the animation with a button press.

```tsx
function triggerConfetti() {
  confettiRef.current?.play(0);
}
```

**Styling and Setting Up the LottieView Component**

Lastly, we style and set up our LottieView component, explaining each property as follows:

- `source`: specifies the animation's JSON file path.

- `autoPlay`: we set this to `false` to prevent the animation from playing automatically when the component mounts, giving us control over when it plays.

- `loop`: set to `false` to ensure the animation plays once and does not loop indefinitely.

- `resizeMode`: this is set to `'cover'` to ensure the animation covers the entire view, creating a full-screen confetti burst.

- `style`: here, we use absolute positioning to cover the full screen, setting a high zIndex to overlay it over other elements and pointerEvents to `'none'` to allow user interaction with other elements since the `LottieView` element overlays the entire screen.

```tsx
<LottieView
  ref={confettiRef}
  source={require('./assets/confetti.json')}
  autoPlay={false}
  loop={false}
  style={styles.lottie}
  resizeMode='cover'
/>

const styles = StyleSheet.create({
  ...
  lottie: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    zIndex: 1000,
    pointerEvents: 'none',
  },
});
```

**Final Code**

```tsx
import LottieView from 'lottie-react-native';
import { useRef } from 'react';
import { StyleSheet, Button, View } from 'react-native';

export default function App() {
  const confettiRef = useRef<LottieView>(null);

  function triggerConfetti() {
    confettiRef.current?.play(0);
  }

  return (
    <>
      <View style={styles.container}>
        <Button title='Trigger' onPress={triggerConfetti} />
      </View>
      <LottieView
        ref={confettiRef}
        source={require('./assets/confetti.json')}
        autoPlay={false}
        loop={false}
        style={styles.lottie}
        resizeMode='cover'
      />
    </>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  lottie: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    zIndex: 1000,
    pointerEvents: 'none',
  },
});
```

And with this setup, a press on the 'Trigger' button will initiate a joyous burst of confetti, enhancing your app with a festive touch to celebrate special moments.

![Implemented Confetti Trigger](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ekof53n5qeto2ibtz29f.gif)

## Conclusion

Congratulations, you've successfully added a confetti celebration to your React Native app! I encourage you to explore different animations available on LottieFiles and to experiment with other interactive elements using what you've learned in this tutorial.

Feel free to share any questions or feedback in the comments below, and I'll be glad to assist you. Happy coding!