Confetti for react native and web with the latest react-native-reanimated v3

React native reanimated confetti, a simple yet fully customizable component made to achieve confetti animation in a cannon-new-year-style. Works for iOS, Android and web.

Installation

npm install react-native-reanimated-confetti

Usage

  1. Import react-native-reanimated-confetti
import Confetti from 'react-native-reanimated-confetti';
  1. 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.

const ConfettiExample: React.FC = () => (
  <Confetti svgs=[<Svg>...</Svg>] />
)

Props

Name Type Description Required Default
count number items count to display 100
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

Hotdog confetti example

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

/* NOTE: Like hotdog confetti? No problem! */
const ConfettiExample: React.FC = () => (
  <Confetti
    count={100}
    origin={{ x: -10, y: 0 }}
    svgs={[
      <Svg viewBox="0 0 512 512" height={20} width={20}>
        <Path d="M496.2 208.2l-34 34c1.2 1.7 1.9 3.7 1.9 5.8c0 2.6-1 5.2-2.9 7L255 461.1c-1.9 1.9-4.4 2.9-7 2.9c-2.1 0-4.1-.7-5.8-1.9l-34 34c10.7 10.2 25 15.8 39.8 15.8c15.4 0 30.1-6.1 41-17L495 289c10.9-10.9 17-25.6 17-41c0-14.8-5.7-29.1-15.8-39.8zM15.8 303.8l34-34c-1.2-1.7-1.9-3.7-1.9-5.8c0-2.6 1-5.2 2.9-7L17 223 50.9 257 257 50.9c1.9-1.9 4.4-2.9 7-2.9c2.1 0 4.1 .7 5.8 1.9l34-34C293.1 5.7 278.8 0 264 0c-15.4 0-30.1 6.1-41 17L17 223C6.1 233.9 0 248.6 0 264c0 14.8 5.7 29.1 15.8 39.8zM447.6 143.6l-304 304c-21.9 21.9-57.3 21.9-79.2 0s-21.9-57.3 0-79.2l304-304c21.9-21.9 57.3-21.9 79.2 0s21.9 57.3 0 79.2zm33.9 33.9c40.6-40.6 40.6-106.5 0-147.1s-106.5-40.6-147.1 0l-304 304c-40.6 40.6-40.6 106.5 0 147.1s106.5 40.6 147.1 0l304-304zm-70.2-38.2c6.2-6.2 6.2-16.4 0-22.6s-16.4-6.2-22.6 0c-7 7-12.5 10.8-17 13.1c-4.5 2.3-8.5 3.4-13.6 4.7l-1.5 .4c-4.7 1.2-10.9 2.7-17.3 5.6c-7.4 3.4-14.8 8.4-22.7 16.3c-16.2 16.2-20.5 30.7-24 42.7l0 .1c-3.1 10.6-5.5 18.8-16 29.2c-5.5 5.5-9.5 7.8-12.4 9.1c-3 1.3-5.8 1.7-10.6 2.4l-.4 .1c-4.6 .6-10.9 1.6-18 4.5c-7.4 3.1-14.8 8.1-22.6 15.9c-16.2 16.2-20.5 30.7-24 42.7l0 .1c-3.1 10.6-5.5 18.8-16 29.2c-5.5 5.5-9.7 8.1-13.3 9.8c-3.6 1.6-6.9 2.5-12 3.7l-1.2 .3c-5.6 1.4-12.6 3.2-20.4 7.3c-7.9 4-16 9.9-25 18.9c-6.2 6.2-6.2 16.4 0 22.6s16.4 6.2 22.6 0c7-7 12.5-10.8 17-13.1c4.5-2.3 8.5-3.4 13.6-4.7l1.5-.4 0 0c4.7-1.2 10.9-2.7 17.3-5.6c7.4-3.4 14.8-8.4 22.7-16.3c16.2-16.2 20.5-30.7 24-42.7l0-.1c3.1-10.6 5.5-18.8 16-29.2c5.5-5.5 9.5-7.8 12.4-9.1c3-1.3 5.8-1.7 10.6-2.4l.4-.1c4.6-.6 10.9-1.6 18-4.5c7.4-3.1 14.8-8.1 22.6-15.9c16.2-16.2 20.5-30.7 24-42.7l0-.1c3.1-10.6 5.5-18.8 16-29.2c5.5-5.5 9.7-8.1 13.3-9.8c3.6-1.6 6.9-2.5 12-3.7l1.2-.3c5.6-1.4 12.6-3.2 20.4-7.3c7.9-4 16-9.9 25-18.9z"/>
      </Svg>
    ]}
  />
)

Futher examples

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

GitHub

View Github