Package Exports
- react-native-confetti-cannon
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-native-confetti-cannon) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
Installation
npm install react-native-confetti-cannon
# or
yarn add react-native-confetti-cannonUsage
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 | give your own colors to the confettis | true |
Events
| Name | Returns | Description | Required | Default |
|---|---|---|---|---|
| onAnimationStart | Item[] | callback triggered at animation start | ||
| onAnimationResume | Item[] | callback triggered at animation resume | ||
| onAnimationStop | Item[] | callback triggered at animation stop | ||
| onAnimationEnd | Item[] | callback triggered at animation end |
Methods
| Name | Returns | Description | Required | Default |
|---|---|---|---|---|
| start | Item[] | start the animation programmatically | ||
| resume | Item[] | resume the animation programmatically | ||
| stop | Item[] | stop the animation programmatically |
Try yourself
Deep into the example folder and run:
npm install && npm startAnd choose one of the following Expo commands:
i: open in iOS simulatora: open in Android emulatorw: 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