cchalfan1/react-native-confetti-cannon

React Native confetti explosion and fall like iOS does.

Live demo

🚀 Try yourself on Storybook web version

Installation

npm install react-native-confetti-cannon
# or
yarn add react-native-confetti-cannon

Usage

import ConfettiCannon from 'react-native-confetti-cannon';

const MyComponent = () => (
  <ConfettiCannon count={200} origin={{x: -10, y: 0}} />
);

Props

Name	Type	Description	Required	Default
count	number	items count to display	required
origin	{x: number, y: number}	animation position origin	required
explosionSpeed	number	explosion duration (ms) from origin to top		350
fallSpeed	number	fall duration (ms) from top to bottom		3000
fadeOut	boolean	make the confettis disappear at the end		false
colors	string[]	give your own colors to the confettis		default colors
autoStart	boolean	auto start the animation		true
autoStartDelay	number	delay to wait before triggering animation		0
zIndex	number	confetti zIndex		0

Events

Name	Returns	Description	Required
onAnimationStart	void	callback triggered at animation start
onAnimationResume	void	callback triggered at animation resume
onAnimationStop	void	callback triggered at animation stop
onAnimationEnd	void	callback triggered at animation end

Methods

Name	Returns	Description	Required
start	void	start the animation programmatically
resume	void	resume the animation programmatically
stop	void	stop the animation programmatically

For example:

import ConfettiCannon from 'react-native-confetti-cannon';

class MyComponent extends React.PureComponent {
  explosion;

  handleSomeKindOfEvent = () => {
    this.explosion && this.explosion.start();
  };

  render() {
    return (
      <ConfettiCannon
        count={200}
        origin={{x: -10, y: 0}}
        autoStart={false}
        ref={ref => (this.explosion = ref)}
      />
    );
  }
}

Examples

Deep into the example folder to see the stories and run:

npm install && npm start

And choose one of the following Expo commands:

• i: open in iOS simulator
• a: open in Android emulator
• w: open in web browser

⚠️ Warning

It is strongly recommended to use 1.2.0 or higher to avoid this warning introduced in React-Native 0.62:

Animated: useNativeDriver was not specified. This is a required option and must be explicitly set to true or false