React Native confetti explosion and fall like iOS does.
:rocket: Try yourself on Storybook web version
npm install react-native-confetti-cannon # or yarn add react-native-confetti-cannon
import ConfettiCannon from 'react-native-confetti-cannon';const MyComponent = () => ( );
| 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 |
| 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 | |
| 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 ( (this.explosion = ref)} /> ); } }
Deep into the
examplefolder 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
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