Confetti

Installation

$ npx shadcn@latest add https://goodui.dev/native/r/confetti.json

Then run npx expo install --fix so react-native-reanimated, react-native-svg match your Expo SDK. Files land in components/goodui-native/confetti.

Usage

import { useState } from "react";
import { View } from "react-native";
import { Button } from "@/components/goodui-native/button/button";
import { Confetti } from "@/components/goodui-native/confetti/confetti";

export function GoalReached() {
  const [celebrations, setCelebrations] = useState(0);
  return (
    <View>
      <Button onPress={() => setCelebrations((c) => c + 1)}>Log 10,000 steps</Button>
      <Confetti trigger={celebrations} announcement="Goal reached" />
    </View>
  );
}

When to use

Examples

const buttonRef = useRef<View>(null);
const confetti = useRef<ConfettiHandle>(null);

<View ref={buttonRef} collapsable={false}>
  <Button onPress={() => confetti.current?.fire()}>Claim reward</Button>
</View>
<Confetti ref={confetti} origin={buttonRef} count={36} />

<View style={{ overflow: "hidden" }}>
  {card}
  <Confetti trigger={done} fullScreen={false} origin="center" power={0.6} />
</View>

API reference

Motion and haptics

• •Point bursts launch in a cone around straight up (spread), denser in the middle; 'top' rains pieces across the width with staggered starts.
• •Every piece follows a closed-form path with linear air drag and gravity plus a growing sideways sway, spins, and turns over (scaleY follows a cosine) like paper; it fades in the last 28 % of its life.
• •Up to three bursts overlap; a fourth replaces the oldest.
• •Reduced motion: no pieces travel. Seven four-point sparkles at the origin fade in, hold and fade out (about 1.1 s).

• •Haptic: celebrate as each burst fires (haptic prop; false turns it off). Never repeated during the burst.

• •One linear clock per burst on the UI thread; each piece is a plain Animated.View whose style is computed from that clock, no per-frame React state.
• •Default 44 pieces; count is clamped to 8 to 120. Keep it under about 60 for low-end Android.
• •Nothing is mounted between bursts.

Accessibility

• •The pieces are hidden from screen readers and never take touches (pointerEvents none).
• •Pass `announcement` to have a burst read out, for example 'Goal reached'.

Notes for AI

Related