Skip to content
Native Animation
ButtonConfirmMicroGesture

Hold to Confirm Button

A deliberate confirmation control with a dimensional progress surface, tactile press response, and a luminous success finish.

$9 for this animation

Add to your project

Copy the component and its assets into your app with the Native Animation CLI.

npx nativeanimation add hold-to-confirm-button

About this animation

A deliberate confirmation control with a dimensional progress surface, tactile press response, and a luminous success finish.

How it works

  1. A long-press gesture begins a linear shared-value animation on contact.
  2. Releasing before the duration springs progress back to zero.
  3. Completion swaps the label, draws a two-stroke check, and sends a short glow and light sweep across the surface.
  4. The bar scales from its left edge; the ring reveals evenly spaced perimeter segments.
  5. Scheme-aware close-tone gradients, a light edge, and layered shadow give both variants material depth.

Install

npx expo install expo-linear-gradient react-native-gesture-handler react-native-reanimated react-native-worklets

Usage

<HoldToConfirmButton onConfirm={() => submit()} />

<HoldToConfirmButton
  variant="ring"
  holdMs={900}
  height={80}
  progressColor="#5B4CF0"
  colorScheme="light"
/>

Props

PropTypeDefaultDescription
confirmedboolean—Controlled completion state.
defaultConfirmedbooleanfalseInitial uncontrolled state.
onChange(confirmed: boolean) => void—Receives state changes.
onConfirm() => void—Runs when confirmation completes.
holdMsnumber1200Required hold duration.
variant'bar' | 'ring''bar'Progress presentation.
labelstring'Hold to confirm'Idle text.
doneLabelstring'Confirmed'Completed text.
widthnumber240Bar width.
heightnumber56Height or ring diameter.
backgroundColorstringScheme-awareBase color.
backgroundEndColorstringScheme-awareEnd color for the material gradient.
progressColorstring'#6D5DFB'Progress color.
textColorstring'#FFFFFF'Content color.
fontFamilystringSystem fontLabel font.
colorScheme'light' | 'dark' | 'auto''auto'Surface color treatment.
accessibilityLabelstringUses labelScreen-reader label.
styleStyleProp<ViewStyle>—Outer style.
testIDstring—Test identifier.

Compatibility

Expo SDK 57, React Native 0.86, Reanimated 4.5, Gesture Handler 2.32, and Worklets 0.10. iOS and Android are supported but device-unverified; web is verified by the project gate. Works in Expo Go.

Accessibility

The control is a labeled button. A screen-reader activation confirms immediately, avoiding a gesture that cannot be reliably held. Reduced Motion keeps the timed affordance but removes the spring and check travel.

More animations