Need help with react-native-confetti-cannon?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

VincentCATILLON
289 Stars 41 Forks MIT License 63 Commits 24 Opened issues

Description

React Native confetti explosion and fall like iOS does.

Services available

!
?

Need anything else?

Contributors list

# 145,557
CSS
PHP
tinder
React N...
55 commits
# 327,173
CSS
Shell
gyrosco...
React N...
1 commit

React-native-confetti-cannon

CircleCI NPM PLATFORMS TYPES GITHUB

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 = () => ( );

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 ( (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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.