Confirm Dialog

A branded confirmation overlay, not a system alert: backdrop fades in, card pops in from the center.

ReanimatedHapticsNativeWindSource

Prerequisites

Icons for the destructive warning glyph, haptics for the confirm/cancel taps, and Reanimated for the fade/scale.


npx expo install @hugeicons/core-free-icons @hugeicons/react-native expo-haptics react-native-reanimated

Install


npx @rslab/cli add confirm-dialog

Usage

import { ConfirmDialog } from '@/components/ui/ConfirmDialog';

const [open, setOpen] = useState(false);

<ConfirmDialog
  visible={open}

  title="Log out?"

  description="You'll need to sign back in to access your projects."

  confirmLabel="Log out"

  onConfirm={() => {
    logOut();

    setOpen(false);
  }}

  onCancel={() => setOpen(false)}
/>;

destructive swaps in a warning icon, a red confirm button, and a heads-up haptic the instant the dialog appears:

<ConfirmDialog
  visible={deleteOpen}

  title="Delete this project?"

  description="This can't be undone. All screens, assets, and history will be permanently removed."

  confirmLabel="Delete"

  destructive

  onConfirm={() => {
    deleteProject();

    setDeleteOpen(false);
  }}

  onCancel={() => setDeleteOpen(false)}
/>

Props

PropTypeDefault

visible

boolean

-

Controls mount/show. The exit animation still plays when it flips back to false.

title

string

-

Required headline.

description?

string

-

Optional supporting copy.

confirmLabel?

string

'Confirm'

cancelLabel?

string

'Cancel'

destructive?

boolean

false

Red confirm button, warning icon above the title, and fires a warning haptic on open.

onConfirm

() => void

-

The component never closes itself; flip visible from here.

onCancel

() => void

-

Fires on cancel, or on tapping the backdrop.

How it works

A visible/rendered state split. The Modal only unmounts once the exit fade+scale has actually finished, so the closing animation is never cut short by an instant unmount.
One progress value drives both the backdrop and the card. The backdrop's opacity and the card's opacity/scale all read from a single shared value, so they can never desync under a fast re-tap or a dropped frame.
withTiming, never withSpring. A confirmation dialog can appear and dismiss in quick succession, mis-tap, reconsider, tap again, and a spring's overshoot reads as sloppy the second time. The entrance scale (0.95 → 1) is a deliberate pop, but it's driven by a flat easing curve, and closing (150ms) is faster than opening (200ms).
The card claims its own touch responder. It's wrapped in its own Pressable with a no-op onPress, so a tap anywhere on the card is swallowed there and never bubbles up to the full-screen backdrop Pressable that calls onCancel.
Haptics are paired, not decorative. destructive fires a warning notification the moment the dialog appears, before the user has had a chance to read it, on purpose, it's a heads-up, not a reward. Every button fires a light impact on press.

Tuning

The 0.95 starting scale in the card's animated style, how pronounced the entrance pop is
The 200ms/150ms open/close durations, keep close faster than open by roughly 15-20%
bg-black/60 on the backdrop: how dark the dim behind the card is
The 340px max width on the card, widen for tablets/large screens

See exactly how this works with an RSLAB subscription.

Get Pro

Confirm Dialog

Prerequisites

Install

Usage

Props

On this page