Barry Michael Doyle

Posted on Sep 19, 2023 • Updated on Nov 6, 2023 • Originally published at barrymichaeldoyle.com

React Native Tutorial: How to Implement a Celebration Confetti Burst

#reactnative #tutorial #ux #programming

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 and Android.

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 (not sponsored) — a haven for animation enthusiasts offering a myriad of free animations, including a variety of confetti animations ready to be used. To integrate these animations in a React Native app, the 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.

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',
  },
});

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.

Download the Lottie JSON file.

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.

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.

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.

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.

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.

<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

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.

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!