Success check

Installation

$ npx shadcn@latest add https://goodui.dev/native/r/success-check.json

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

Usage

import { useState } from "react";
import { Button } from "@/components/goodui-native/button/button";
import { SuccessCheck } from "@/components/goodui-native/success-check/success-check";

export function SendMoney({ send }: { send: () => Promise<void> }) {
  const [done, setDone] = useState(false);
  return (
    <>
      <Button onPress={async () => { await send(); setDone(true); }}>Send $1,250.00</Button>
      <SuccessCheck
        variant="fullscreen"
        visible={done}
        onDismiss={() => setDone(false)}
        title="Money sent"
        subtitle="$1,250.00 to Maya Chen"
        confetti
      />
    </>
  );
}

When to use

Examples

{submitted ? (
  <SuccessCheck title="Booked" subtitle="Thu 14 Nov, 10:30 with Dr. Patel">
    <Button variant="secondary" onPress={close}>Done</Button>
  </SuccessCheck>
) : form}

<SuccessCheck status="error" size="sm" title="Card declined" subtitle="Try another card" playKey={attempt} />

API reference

Motion and haptics

• •Success: the circle scales in on the bouncy spring, the check draws itself in (260 ms, from 170 ms), a ring pulses out to 1.75× and fades over 700 ms, then title, subtitle and children rise 12 pt on the smooth spring, staggered.
• •Error: the circle scales in on the snappy spring, the two strokes of the cross draw one after another, then the mark shakes once.
• •It plays again each time visible turns true, the status changes or playKey changes.
• •Fullscreen fades its background in and out over the app.
• •Reduced motion: circle and text fade in, the check appears complete, no ring, no shake, no confetti physics (Confetti shows its static sparkle).

• •Haptic: success (celebrate with confetti) or error when the mark lands (about 400 ms in), once per play. haptic={false} turns it off.

• •A handful of Reanimated values on the UI thread. Confetti mounts only when the burst fires and unmounts when it ends.

Accessibility

• •Each time it plays it announces the title and subtitle (or 'Done' / 'Something went wrong').
• •Fullscreen is modal (accessibilityViewIsModal): a single button that closes it on tap, with the hint 'Closes this message'; Escape on the web and the Android back button close it too.
• •Colors come from success and danger with their on-colors; the mark is never the only signal when a title is set.

Notes for AI

Related