Live demo

:rocket: 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: 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