Alert dialog

Installation

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

Then run npx expo install --fix so react-native-gesture-handler, react-native-reanimated match your Expo SDK. Files land in components/goodui-native/alert-dialog.

• •Wrap the app in GestureHandlerRootView and ThemeProvider (the alert renders in its overlay layer).

Usage

import { AlertDialog } from "@/components/goodui-native/alert-dialog/alert-dialog";

export function CancelPlan({ open, onOpenChange }: { open: boolean; onOpenChange: (open: boolean) => void }) {
  return (
    <AlertDialog
      open={open}
      onOpenChange={onOpenChange}
      tone="warning"
      title="Cancel your Pro plan?"
      message="You keep Pro features until Dec 1."
      actions={[
        { label: "Keep Pro", style: "cancel" },
        { label: "Cancel plan", style: "destructive", onPress: () => api.cancelPlan() },
      ]}
    />
  );
}

When to use

Examples

<AlertDialog
  open={open}
  onOpenChange={setOpen}
  title="Rename workout"
  input={{ defaultValue: workout.name, placeholder: "Workout name" }}
  errorLabel="Give the workout a name."
  actions={[
    { label: "Cancel", style: "cancel" },
    { label: "Save", onPress: (name) => (name.trim() ? api.rename(workout.id, name) : Promise.reject()) },
  ]}
/>

<AlertDialog
  open={open}
  onOpenChange={setOpen}
  variant="filled"
  title="Save changes to “Q3 report”?"
  actions={[
    { label: "Save", onPress: save },
    { label: "Do not save", style: "destructive" },
    { label: "Cancel", style: "cancel" },
  ]}
/>

API reference

Motion and haptics

• •Enter: scales from 1.1 to 1 on the bouncy spring while it fades in; exit fades and shrinks to 0.96.
• •Actions follow the finger: the highlight moves to whichever action is under it, and releasing outside every action chooses nothing.
• •Tap outside a non-dismissible alert: it nudges to 1.035 and springs back on the bouncy spring.
• •Async failure: the card shakes and the error appears; filled buttons also scale to 0.97 under the finger.
• •With a text field the card rises by half the keyboard height so it stays centered in the free space (native).
• •Reduced motion: no scale-in, nudge, shake or button scale; the alert fades in and out.

• •Haptic: tap when an action is chosen
• •Haptic: select each time the finger slides onto another action
• •Haptic: success when an action's promise resolves, error when it rejects

• •Highlight and hit testing run on the UI thread; the alert mounts only while open or closing.

Accessibility

• •The card has accessibilityRole alert and is modal; the title and message are announced when it opens.
• •Each action is a button with busy and disabled states; double tap activates it. On the web actions are focusable buttons (Enter or Space).
• •A failed action announces errorLabel and shows it under the message.
• •Android back runs the cancel action when there is one (or closes a dismissible alert); otherwise it nudges.

Notes for AI

Related