React Native app screen with colorful confetti animation

Confetti Carnival: Unleashing Festive Flair with react-native-fast-confetti

The Gray Cat
The Gray Cat

Get ready to add a splash of celebration to your React Native applications! react-native-fast-confetti is here to turn your mobile experiences into joyous carnivals with its high-performance confetti animations. Whether you’re building a game, a social app, or any mobile experience that calls for a moment of triumph, this library has got you covered with its dazzling and efficient confetti effects.

Showering Your App with Festive Features

react-native-fast-confetti isn’t just another animation library. It’s a powerhouse of performance and customization, built on the robust foundation of the Skia Atlas API. Let’s rain down some of its standout features:

  • Lightning-fast performance: Leveraging the Skia Atlas API, this library ensures smooth animations even with a high particle count.
  • Customizable confetti: Adjust the number, size, colors, and behavior of your confetti pieces to match your app’s style.
  • Flexible animation control: Start, pause, resume, or reset your confetti shower with ease.
  • Screen-adaptive sizing: The confetti container automatically adjusts to your device’s screen dimensions.
  • Event callbacks: Hook into animation start and end events for precise control over your app’s behavior.

Setting Up Your Confetti Cannon

Before we start the celebration, let’s get everything installed. First, ensure you have the necessary dependencies:

npm install react-native-reanimated @shopify/react-native-skia

Now, let’s add our star of the show:

npm install react-native-fast-confetti

If you prefer yarn, you can use:

yarn add react-native-fast-confetti

Launching Your First Confetti Burst

Basic Confetti Explosion

Let’s start with a simple confetti burst that triggers as soon as a component mounts:

import React from 'react';
import { View } from 'react-native';
import { Confetti } from 'react-native-fast-confetti';

const CelebrationScreen = () => {
  return (
    <View style={{ flex: 1 }}>
      <Confetti />
    </View>
  );
};

export default CelebrationScreen;

This basic implementation will create a fullscreen confetti effect with default settings. The confetti will start falling as soon as the component renders, creating an instant celebration.

Customizing Your Confetti

Now, let’s tailor our confetti to fit a specific theme or design:

import React from 'react';
import { View } from 'react-native';
import { Confetti } from 'react-native-fast-confetti';

const CustomConfettiScreen = () => {
  return (
    <View style={{ flex: 1 }}>
      <Confetti
        count={150}
        colors={['#ff0000', '#00ff00', '#0000ff']}
        flakeSize={{ width: 10, height: 20 }}
        duration={6000}
        fadeOutOnEnd={true}
      />
    </View>
  );
};

export default CustomConfettiScreen;

In this example, we’ve customized several aspects of our confetti:

  • We’ve reduced the number of confetti pieces to 150.
  • We’ve specified a custom color palette of red, green, and blue.
  • The size of each confetti flake has been increased slightly.
  • The animation duration has been set to 6 seconds.
  • We’ve enabled the fade-out effect as the confetti reaches the bottom of the screen.

Advanced Confetti Choreography

Controlled Confetti Bursts

For more control over when the confetti appears, you might want to trigger it on demand:

import React, { useRef } from 'react';
import { View, Button } from 'react-native';
import { Confetti } from 'react-native-fast-confetti';

const ControlledConfettiScreen = () => {
  const confettiRef = useRef(null);

  const triggerConfetti = () => {
    confettiRef.current?.restart();
  };

  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Button title="Celebrate!" onPress={triggerConfetti} />
      <Confetti
        ref={confettiRef}
        autoplay={false}
        count={200}
        duration={5000}
      />
    </View>
  );
};

export default ControlledConfettiScreen;

Here, we’ve created a button that triggers the confetti when pressed. We use a ref to access the Confetti component’s methods, allowing us to start the animation on demand.

Choreographed Confetti Performance

For a more complex celebration, you might want to create a choreographed confetti performance:

import React, { useRef, useEffect } from 'react';
import { View } from 'react-native';
import { Confetti } from 'react-native-fast-confetti';

const ChoreographedConfettiScreen = () => {
  const confettiRef1 = useRef(null);
  const confettiRef2 = useRef(null);

  useEffect(() => {
    const timer1 = setTimeout(() => confettiRef1.current?.restart(), 1000);
    const timer2 = setTimeout(() => confettiRef2.current?.restart(), 3000);

    return () => {
      clearTimeout(timer1);
      clearTimeout(timer2);
    };
  }, []);

  return (
    <View style={{ flex: 1 }}>
      <Confetti
        ref={confettiRef1}
        autoplay={false}
        count={100}
        colors={['#FFD700', '#FFA500']}
        verticalSpacing={20}
      />
      <Confetti
        ref={confettiRef2}
        autoplay={false}
        count={150}
        colors={['#4B0082', '#8A2BE2']}
        verticalSpacing={40}
      />
    </View>
  );
};

export default ChoreographedConfettiScreen;

In this advanced example, we’ve created two separate confetti effects with different colors and densities. They’re triggered at different times using setTimeout, creating a layered and dynamic celebration effect.

Wrapping Up the Party

react-native-fast-confetti brings a burst of joy and celebration to your React Native applications. With its high performance, customizable options, and easy integration, you can create engaging and festive user experiences that will delight your users.

Whether you’re congratulating a user on an achievement, celebrating a special event in your app, or just want to add a touch of whimsy to your UI, this library provides the tools you need to create stunning confetti effects. So go ahead, sprinkle some digital joy in your next React Native project, and watch as your users’ faces light up with every colorful burst!

Remember, in the world of mobile apps, it’s often the little touches that make the biggest impact. With react-native-fast-confetti, you’re not just adding an animation – you’re creating moments of delight that users will remember long after the last piece of confetti has fallen.

Comments