Expo Confetti

A React Native confetti overlay for Expo — seven particle shapes, four launch modes, any palette, and real drag physics running on the UI thread.

componentAnimationExpo SDK 57Free

Preview

Expo Confetti screenshot 1

Usage

Terminal
$npx expo install react-native-reanimated react-native-worklets react-native-svg

Built with React Native core only — no third-party UI library required.

Examples

6

Mount the overlay once and drive it imperatively. Every prop is optional — this is the whole thing with defaults: 80 pieces of festive rain, all seven shapes, 4.2 seconds.

tsx
const confetti = useRef(null);<Confetti ref={confetti} />confetti.current?.play();   // start a runconfetti.current?.stop();   // cancel it and clear the pieces

Overview

Expo Confetti is a celebration overlay for React Native that runs real physics instead of a canned animation. Each piece solves the closed form of linear drag — v' = g − k·v — evaluated fresh every frame rather than integrated step by step, so pieces reach terminal velocity almost immediately (about 563 px/s at the shipped g = 900, k = 1.6) and fall the way paper actually falls rather than accelerating like a dropped rock. A sine term adds sideways flutter, and independent X, Y and Z rotation supplies the foil-flip glint. Every piece reads the same Reanimated shared value and derives its own position from it, so a 180-piece burst is one running animation rather than 180 — and because the trajectory is a worklet, none of it touches the JS thread. Colour, shape and launch style are independent axes: pass many colours for a classic multi-colour shower or exactly one for a branded single-colour effect, pick from seven shapes (strip, rect, square, circle, triangle, star and heart) drawn as plain views and react-native-svg paths rather than bitmaps, and fire the run as rain, a radial burst, twin corner cannons or a fountain. Mount it once at the root of a screen and drive it by ref: it renders nothing until play() is called and cleans itself up when the run ends.

What's included

  • Seven particle shapes — strip, rect, square, circle, triangle, star, heart
  • Four launch modes — rain, burst, cannons, fountain
  • Five built-in palettes, or any array of hex colours
  • Single-colour bursts from a one-entry array
  • Closed-form linear drag — terminal velocity, not free fall
  • One shared clock drives every piece, not one animation each
  • SVG shapes rather than bitmaps — crisp at any size
  • play() / stop() ref API, plus autoplay and onComplete
  • Pieces past the bottom edge stop drawing
  • Runs entirely on the UI thread (Reanimated 4 worklets)
  • MIT licensed — full source on GitHub

Tech Stack

ExpoReact NativeJavaScriptreact-native-reanimatedreact-native-svgreact-native-worklets

Get this component

Free

One-time payment · Lifetime access

Free License

Personal and commercial use

Free
  • Use in 1 personal project
  • Lifetime access to updates
  • Email support
  • Remove attribution
  • Commercial use included
Get it on GitHub
Full JavaScript source code
All examples & variants
Lifetime updates
Public repo — clone or fork it