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
137 Stars 21 Forks MIT License 59 Commits 6 Opened issues

Description

React Native confetti explosion and fall like iOS does.

Services available

!
?

Need anything else?

Contributors list

# 222,174
PHP
Objecti...
tinder
React N...
52 commits
# 359,808
Objecti...
CSS
Shell
gyrosco...
1 commit

React-native-confetti-cannon

CircleCI NPM PLATFORMS 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.