/react-native-confetti-cannon

React Native confetti explosion and fall like iOS does.

Primary LanguageJavaScriptMIT LicenseMIT

React-native-confetti-cannon

CircleCI NPM PLATFORMS TYPES GITHUB

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

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