react-native-fast-confetti 🎊

The fastest confetti animation library for React Native, powered by Skia Atlas API.

[!NOTE] Still using v1? Click here for the v1 documentation.

Installation

[!IMPORTANT] This library depends on react-native-reanimated, @shopify/react-native-skia, and react-native-worklets. Make sure to install those first.

yarn add react-native-fast-confetti

Components

<Confetti />

Confetti pieces fall from the top of the screen.

<Confetti autoplay> <Confetti.Flake size={12} radius={6} /> <Confetti.Flake width={8} height={14} /> <Confetti.Flake width={8} height={14} radius={6.5} /> <Confetti.Flake width={8} height={14} radius={4} /> </Confetti>;

<ContinuousConfetti />

A seamless, never-ending stream of confetti.

<ContinuousConfetti autoplay> <ContinuousConfetti.Flake size={12} radius={6} /> </ContinuousConfetti>;

<PIConfetti />

Confetti bursts outward from one or more points, then drifts down.

<PIConfetti autoplay> <PIConfetti.Origin blastPosition="center" count={200}> <PIConfetti.Flake size={12} /> </PIConfetti.Origin> </PIConfetti>;

<CannonConfetti />

Launch confetti from multiple origins with individual control over each cannon.

<CannonConfetti autoplay gravity={3}> <CannonConfetti.Origin position="bottom-left" count={150} initialSpeed={3}> <CannonConfetti.Flake size={12} radius={6} /> </CannonConfetti.Origin> <CannonConfetti.Origin position="bottom-right" count={150} initialSpeed={3}> <CannonConfetti.Flake size={12} /> </CannonConfetti.Origin> </CannonConfetti>;

Ref Methods

All components expose the same control methods via ref:

import { useRef } from 'react';
import { Confetti, ConfettiMethods } from 'react-native-fast-confetti';

const ref = useRef<ConfettiMethods>(null);

<Confetti ref={ref} autoplay={false}>
  <Confetti.Flake size={12} />
</Confetti>;

// Then trigger manually:
ref.current?.restart();
ref.current?.pause();
ref.current?.resume();
ref.current?.reset();

| Method | Description | | --------- | --------------------------------------- | | restart | Start the animation from the beginning. | | pause | Pause the animation. | | resume | Resume from where it paused. | | reset | Reset and stop the animation. |

restart accepts an optional options object:

• Confetti / ContinuousConfetti: no options
• PIConfetti: { blastPositions } to override origin blast positions
• CannonConfetti: { origins } to override origin positions/targets

Custom Textures

Same as <Confetti /> except verticalSpacing defaults to 200.

Pass a Skia image or SVG on the parent component or on individual Flake children. Flake-level textures override the parent default.

import { useImage, useSVG } from '@shopify/react-native-skia';
import { Confetti } from 'react-native-fast-confetti';

const moneyImage = useImage(require('./money.png'));
const snowSvg = useSVG(require('./snowflake.svg'));

// Parent-level texture — applies to all flakes
<Confetti autoplay image={moneyImage}>
  <Confetti.Flake size={50} />
</Confetti>

// Flake-level texture — per flake
<Confetti autoplay>
  <Confetti.Flake size={50} image={moneyImage} />
  <Confetti.Flake size={30} svg={snowSvg} />
  <Confetti.Flake width={8} height={14} />
</Confetti>

// Parent default + flake override
<Confetti autoplay image={moneyImage}>
  <Confetti.Flake size={50} />               {/* uses money image */}
  <Confetti.Flake size={30} svg={snowSvg} /> {/* overrides with SVG */}
</Confetti>

Per-Flake Colors

Each flake group can have its own color palette. Flake-level colors override the parent.

<Confetti autoplay colors={['#FF0000', '#00FF00']}>
  <Confetti.Flake width={8} height={14} /> {/* red/green */}
  <Confetti.Flake size={12} colors={['#0000FF', '#FFFF00']} />{' '}
  {/* blue/yellow */}
</Confetti>

Named Positions

Props that accept a position (blastPosition, position, target) can use a named string or explicit coordinates:

// Named position
<PIConfetti blastPosition="bottom-center" />

// Explicit coordinates
<PIConfetti blastPosition={{ x: 100, y: 200 }} />

Available named positions: top-left, top-center, top-right, center-left, center, center-right, bottom-left, bottom-center, bottom-right

Reduce Motion

By default, confetti respects the device Reduce Motion setting. When Reduce Motion is enabled, the library scales down particle count and motion intensity with a default factor of 0.5.

<Confetti reduceMotion="system" />
<Confetti reduceMotion="never" />
<Confetti reduceMotion={{ mode: 'system', factor: 0.75 }} />
<Confetti reduceMotion={{ mode: 'always', factor: 1 }} />

The factor is clamped between 0 and 1. A factor of 0 keeps full motion; a factor of 1 disables animated confetti.

Props

<Confetti /> Props

| Name | Default | Description | | ------------------ | ---------------- | ------------------------------------------ | | count | 200 | Number of confetti pieces. | | autoplay | true | Play animation on mount. | | autoStartDelay | 0 | Delay (ms) before autoplay. | | infinite | false | Loop the animation. | | gravity | 1.0 | Gravity strength. | | colors | Built-in palette | Array of color strings. | | flakeStyle | 'glossy' | 'solid' or 'glossy'. | | fadeOutOnEnd | false | Fade pieces as they exit. | | image | N/A | Default Skia image texture for all flakes. | | svg | N/A | Default Skia SVG texture for all flakes. | | reduceMotion | 'system' | Reduce motion using the system setting. | | onAnimationStart | N/A | Called when animation starts. | | onAnimationEnd | N/A | Called when animation ends. |

| Name | Default | Description | | ----------------- | ------------------------ | ---------------------------------------------------------------- | | wobble | { min: 0.03, max: 0.08 } | Tumble/bobbing intensity. | | drift | 0.7 | Horizontal drift (0-1). | | easing | Easing.bezier(0.4,0,1,1) | Custom easing for the fall animation progress. | | flipIntensity | 0.85 | How dramatically pieces flip (0-1). Lower = flatter. | | rotation | N/A | Rotation range config. | | depth | { min: 0.8, max: 1.0 } | 3D perspective scale range. | | initialScale | 0.3 | Scale at spawn before growing. | | verticalSpacing | 70 | Space between rows. Lower = denser. | | containerStyle | N/A | Style for the container. Supports any sizing (numeric, %, flex). |

<ContinuousConfetti /> Props

Same as <Confetti /> except:

• No infinite prop (always infinite)
• No onAnimationEnd or fadeOutOnEnd props (animation never ends)
• verticalSpacing defaults to 200

<PIConfetti /> Props

| Name | Default | Description | | ------------------ | ---------------- | -------------------------------------------- | | autoplay | true | Play animation on mount. | | autoStartDelay | 0 | Delay (ms) before autoplay. | | infinite | false | Loop the animation. | | gravity | 3.0 | Gravity strength. | | colors | Built-in palette | Default colors for all origins. | | flakeStyle | 'glossy' | Default 'solid' or 'glossy' for origins. | | fadeOutOnEnd | false | Fade pieces as they exit. | | image | N/A | Default Skia image texture for all flakes. | | svg | N/A | Default Skia SVG texture for all flakes. | | reduceMotion | 'system' | Reduce motion using the system setting. | | onAnimationStart | N/A | Called when animation starts. | | onAnimationEnd | N/A | Called when animation ends. |

| Name | Default | Description | | ---------------- | ---------------------- | ---------------------------------------------------------------- | | drag | 3.0 | Air resistance. Number or { horizontal, vertical }. | | sprayDuration | N/A | Stagger pieces over N ms. | | speedVariation | { min: 0.0, max: 1.0 } | Default speed variation for origins. | | easing | Easing.linear | Custom easing for the animation progress. | | flipIntensity | 0.85 | How dramatically pieces flip (0-1). Lower = flatter. | | rotation | N/A | Default rotation config for origins. | | depth | { min: 1, max: 1.1 } | Default depth range for origins. | | initialScale | 0.3 | Scale at spawn before growing. | | containerStyle | N/A | Style for the container. Supports any sizing (numeric, %, flex). |

<PIConfetti.Origin /> Props

| Name | Default | Description | | -------------------------- | ------- | --------------------------------------------------------- | | blastPosition (required) | - | Where the burst originates. Named position or { x, y }. | | count | 100 | Number of pieces from this origin. | | initialSpeed | 1 | Launch speed. | | spread | 2*PI | Launch cone width (radians). |

| Name | Default | Description | | ---------------- | ---------------------- | ------------------------------------------ | | speedVariation | { min: 0.0, max: 1.0 } | Per-piece speed multiplier range. | | colors | N/A | Colors for this origin (overrides root). | | flakeStyle | N/A | Style for this origin (overrides root). | | rotation | N/A | Rotation for this origin (overrides root). | | depth | { min: 1, max: 1.1 } | Depth for this origin (overrides root). |

<CannonConfetti /> Props

| Name | Default | Description | | ------------------ | ---------------- | -------------------------------------------- | | autoplay | true | Play animation on mount. | | autoStartDelay | 0 | Delay (ms) before autoplay. | | infinite | false | Loop the animation. | | gravity | 3.0 | Gravity strength. | | target | N/A | Default aim point for all origins. | | colors | Built-in palette | Default colors for all origins. | | flakeStyle | 'glossy' | Default 'solid' or 'glossy' for origins. | | fadeOutOnEnd | false | Fade pieces as they exit. | | image | N/A | Default Skia image texture for all flakes. | | svg | N/A | Default Skia SVG texture for all flakes. | | reduceMotion | 'system' | Reduce motion using the system setting. | | onAnimationStart | N/A | Called when animation starts. | | onAnimationEnd | N/A | Called when animation ends. |

| Name | Default | Description | | ---------------- | ---------------------- | ---------------------------------------------------------------- | | drag | 3.0 | Air resistance. Number or { horizontal, vertical }. | | sprayDuration | 300 | Stagger all cannons over N ms. | | speedVariation | { min: 0.8, max: 1.2 } | Default speed variation for origins. | | easing | Easing.linear | Custom easing for the animation progress. | | flipIntensity | 0.85 | How dramatically pieces flip (0-1). Lower = flatter. | | rotation | N/A | Default rotation config for origins. | | depth | { min: 1, max: 1.1 } | Default depth range for origins. | | initialScale | 0.3 | Scale at spawn before growing. | | containerStyle | N/A | Style for the container. Supports any sizing (numeric, %, flex). |

<CannonConfetti.Origin /> Props

| Name | Default | Description | | --------------------- | ------- | ---------------------------------------------------------- | | position (required) | - | Where the cannon fires from. Named position or { x, y }. | | count | 100 | Number of pieces from this origin. | | initialSpeed | 2.0 | Launch speed. | | spread | PI/5 | Launch cone width (radians). | | target | N/A | Aim point (overrides root target). |

| Name | Default | Description | | ---------------- | ---------------------- | ------------------------------------------ | | speedVariation | { min: 0.8, max: 1.2 } | Per-piece speed multiplier range. | | colors | N/A | Colors for this origin (overrides root). | | flakeStyle | N/A | Style for this origin (overrides root). | | rotation | N/A | Rotation for this origin (overrides root). | | depth | { min: 1, max: 1.1 } | Depth for this origin (overrides root). |

<*.Flake /> Props

Define flake sizes as children of any confetti component (or origin).

| Name | Default | Description | | ------------ | ------- | --------------------------------------------------------------- | | size | - | Sets both width and height. | | width | - | Flake width (use instead of size for non-square). | | height | - | Flake height (use instead of size for non-square). | | radius | 0 | Corner radius. | | flakeStyle | N/A | Override the parent's flakeStyle. | | image | N/A | Skia image texture (overrides parent image/svg). | | svg | N/A | Skia SVG texture (overrides parent image/svg). | | colors | N/A | Color palette for this flake group (overrides parent colors). |

Compatibility

[!IMPORTANT] This library does not depend on a specific React Native version directly. Compatibility depends on React Native Reanimated, React Native Worklets, and React Native Skia. Skia does not publish a Reanimated-style compatibility matrix, so use its installation requirements as the source of truth.

| Package version | Tested with React Native | Tested with Skia | Tested with Reanimated | Worklets | Minimum inferred from API usage | | --- | --- | --- | --- | --- | --- | | 2.0.0 | 0.83.2 | 2.5.1 | 4.2.2 | Required via Reanimated 4 | React Native >=0.79, React >=19, Skia >=2.0.0, Reanimated >=4.0.0, Worklets >=0.7.0 | | 1.0.0 - 1.1.2 | 0.79.2 | 2.0.0-next.4 | 3.18.0 | Not required directly | React Native >=0.79, React >=19, Skia 2.0.0-next.x / >=2.0.0, Reanimated >=3.18.0 | | 0.8.3 | 0.79.2 | 2.0.0-next.4 | 3.17.5 | Not required directly | React Native >=0.79, React >=19, Skia 2.0.0-next.x / >=2.0.0, Reanimated >=3.17.5 | | 0.8.1 - 0.8.2 | 0.76.6 | 1.4.2 | 3.16.1 | Not required directly | React Native >=0.76, React 18.x, Skia >=1.4.2, Reanimated >=3.16.1 | | 0.2.0 - 0.7.0 | 0.74.5 | 1.4.2 | 3.15.5 | Not required directly | React Native >=0.74, React 18.x, Skia >=1.4.2, Reanimated >=3.15.5 |

For exact app support, check the compatibility pages for the installed versions of Reanimated and Worklets. For Skia, follow the official installation requirements: current Skia versions require React Native >=0.79 and React >=19; React Native <=0.78 / React <=18 projects should use Skia 1.12.4 or below.

Migrating from v1

See the migration guide for a detailed mapping of v1 props to v2.

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

Made with create-react-native-library