# Confirm Button — Two-Step Delete & Hold-to-Confirm Button for React Native & Expo

> A button for actions that mustn't happen by accident: one press arms it and a cancel bubble buds off on a liquid neck that stretches and snaps; a second press confirms through busy, done and error, driven by your promise. It disarms itself with a countdown, or hold to confirm…

- Kind: Mobile component (Buttons)
- Price: Free
- License: MIT License. Do anything with it, keeping the copyright notice.
- Developer: UpFork
- Tags: button, effect, react-native, expo, skia, reanimated, delete, confirm
- npm packages: @shopify/react-native-skia, expo-haptics, react-native-gesture-handler, react-native-reanimated, react-native-svg, react-native-worklets
- Published: 2026-10-14
- Updated: 2026-10-14
- Page: https://upfork.dev/products/confirm-button-react-native

## How to get it

It's a React Native component for Expo apps (Expo SDK 57), not a shadcn item: copy its folders into the app's root from its ZIP (Download source on its page) or through UpFork's MCP server (install_product), then install its packages with Expo:

```bash
npx expo install @shopify/react-native-skia expo-haptics react-native-gesture-handler react-native-reanimated react-native-svg react-native-worklets
```

It's free and in no plan: an AI assistant installs it through MCP with no account, and its ZIP downloads with a free UpFork account.

Step by step, with the App.tsx that shows it and Skia's web setup: https://upfork.dev/docs/mobile.

## About

Confirm Button is for the actions people must not trigger by accident: delete an account, remove an item, leave a group, send money.

- **Arm, then confirm.** One press arms it: the label changes its mind, and a round cancel bubble buds off its side on a liquid neck that stretches, thins and snaps, then settles with a little wobble. A second press confirms; the bubble cancels.
- **Honest states.** Busy waits for your promise (the pill closes into a circle around a spinner), done draws a check, error shakes and shows the rejection's message. Then back to idle by itself.
- **Disarms itself.** Left armed, it counts down round the bubble and quietly merges back. Pressing the pill pauses it.
- **Or hold.** Hold-to-confirm mode sweeps a liquid fill with a wavy front across the pill, with haptic ticks that build up; let go early and it drains back.
- **Crisp and clean.** The pill, the neck and the bubble are one shape drawn with Skia: sharp edges and a real shadow, no blurry goo. Colours blend in OKLab, so red never turns brown on its way to black. Labels are native text, measured, never overlapping.
- **For everyone.** Danger, primary and neutral tones in light and dark, three sizes, full width; screen readers get one button with a state-aware label and a separate Cancel; reduced motion respected; useConfirm() for your own visuals.

Three complete demos: an account's danger zone (one button armed at rest), a shopping bag whose rows fold away, and a hold-to-send transfer that can fail.