react-native-reanimated-confetti

$3

npm install react-native-reanimated-confetti

$3

1. Import react-native-reanimated-confetti

``javascript
import Confetti from 'react-native-reanimated-confetti';
`

2. Once you create the Confetti, you have two options or a mix a both:

- Default Confetti : The component will use the shapes which are located in src/components/Shapes

- Custom confetti : Insert custom confetti shapes with the svgs prop. The confetti shapes will consist of a mix of both default and custom shapes. Adding the prop onlyShowCustomSvgs to true will only show the custom shapes.

`js
const ConfettiExample: React.FC = () => (
...] />
)
`

$3

| Name | Type | Description | Required | Default |
| ------------------ | ---------------------- | ------------------------------------------- | -------- | --------------- |
| count | number | items count to display | | 100 |
| activateAnimation | shared value | possibility to prerender items | | false |
| batchConfetti | boolean | batch confetti for performance reasons | | false |
| origin | {x: number, y: number} | animation position origin | | { x: -10, y: 0} |
| 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 |
| onlyShowCustomSvgs | boolean | only showing custom svgs based on svgs prop | | false |
| svgs | React.JSX.Element[] | array containing your custom svgs | | [] |
| delay | number | cannon / animation delay | | 0 |
| minSize | number | min size of confetti shapes | | 20 |
| maxSize | number | max size of confetti shapes | | 30 |

$3

`js
import Confetti from 'react-native-reanimated-confetti';
import Svg, { Path } from 'react-native-svg';

/ NOTE: Like hotdog confetti? No problem! /
const ConfettiExample: React.FC = () => (
count={100}
origin={{ x: -10, y: 0 }}
svgs={[



]}
/>
)
``

$3

Please see the examples folder or storybook https://marcuzgabriel.github.io/react-native-reanimated-confetti