About this animation
React Native confetti feels more convincing when particles rise, spread, turn, and fall with coherent physical motion. This Skia cannon launches a dense fan of rectangles, dots, and curled streamers from the point a person taps or from coordinates supplied through its ref. Use it for completed purchases, achieved goals, successful submissions, milestones, or playful rewards. A single Reanimated timeline drives deterministic, frame-rate-independent flight without per-frame React state, while analytical air resistance, gravity, lateral acceleration, rotation, and oscillating scale create the paper-like movement. Configure the palette, particle count, spread, duration, and accessibility label; the component measures its container so launch speed, gravity, and particle scale adapt to the available space.
When to use it
- Celebrate a completed purchase or successful submission.
- Reward a goal, streak, or milestone.
- Launch confetti from a tapped location.
- Trigger a celebration from an external control.
A touch-driven Skia celebration with a dense, physical fan of flipping paper, dots, and curled streamers.
How it works
- The component measures its own container, so launch speed, gravity, and particle scale adapt to the space it receives.
- A single linear shared-value timeline drives every particle on the UI thread without React state updates per frame.
- Each particle launches inside an upward cone with deterministic speed variation. Linear air resistance is integrated analytically, then gravity and a small lateral acceleration bend the flight.
- Rectangles, circles, and curved Skia paths rotate while an oscillating X scale simulates paper flipping in 3D.
- Tap anywhere to launch from that point, or call
fire()through the forwarded ref. Particles fade over the final quarter of the 2.4-second flight.
Why this one
Typical confetti effects scatter a few rectangles along short eased paths. This cannon launches 120–160 pieces with frame-rate-independent physics, a true 50-degree fan, mixed silhouettes, simulated 3D flipping, and an interruptible origin. The result clearly rises, opens, and falls instead of reading as a decorative burst.
Install
npx expo install @shopify/react-native-skia react-native-reanimatedUsage
import { useRef } from 'react';
import ConfettiCannon, { type ConfettiCannonRef } from './ConfettiCannon';
export function Celebration() {
const cannonRef = useRef<ConfettiCannonRef>(null);
return <ConfettiCannon ref={cannonRef} />;
}Launch from a control and tune its personality:
<>
<Button
title="Celebrate"
onPress={() => cannonRef.current?.fire({ x: 180, y: 560 })}
/>
<ConfettiCannon
ref={cannonRef}
colors={['#6E56FF', '#FF5A67', '#FFB020', '#20BFA3', '#4B8DFF']}
count={150}
spread={46}
durationMs={2500}
/>
</>Props
| Prop | Type | Default | Description |
|---|---|---|---|
colors | readonly string[] | Six-color curated palette | Particle colors. |
count | number | 140 | Particle count, clamped to 120–160. |
spread | number | 50 | Full upward launch-cone angle in degrees. |
durationMs | number | 2400 | Total flight duration; values below 800 ms are clamped. |
accessibilityLabel | string | 'Launch confetti' | Screen-reader label for the full-size tap target. |
style | StyleProp<ViewStyle> | — | Outer-container style. |
testID | string | — | Test identifier for the outer container. |
The forwarded ref exposes fire(origin?), where origin uses local component coordinates. With no origin, the cannon fires from the lower center of its measured container.
Compatibility
- Expo SDK 57
- React Native 0.86
- Reanimated 4.5
- Skia 2.6
- iOS: supported, not yet verified on a device
- Android: supported, not yet verified on a device
- Web: supported, not yet visually verified
- Works in Expo Go because the native dependencies are included in the SDK
Accessibility
The whole surface is a labeled button, so touch and screen-reader users can launch the same effect. With reduced motion enabled, the ballistic flight and spinning are replaced by a brief stationary radial reveal and fade.
FAQ
- How many particles can the React Native confetti cannon launch?
- The count prop defaults to 140 and is clamped between 120 and 160. Particles include rectangles, circles, and curled Skia paths in the supplied color palette.
- Can I choose where the confetti starts?
- Yes. Tap the full-size surface or call fire with local x and y coordinates. Calling fire without an origin launches from the lower center of the measured container.
- Is this Skia confetti animation verified on every platform?
- No. Its manifest lists iOS, Android, and web as supported but currently unverified. With Reduce Motion, ballistic flight and spinning become a brief stationary radial reveal and fade.
