React Native Slider Button: Slide to Pay

A payment slider that springs back or morphs into success, with configurable label, amount, track color, and label font asset.

Why this one

Typical payment sliders stop at a moving thumb and a flat text fade. This version keeps the warm trail physically attached to the drag, clips a real Skia light sweep inside the prompt glyphs, and turns the same thumb into the loading ring and hand-drawn confirmation. Optional composed content and a success badge make the interaction feel native to a real checkout instead of an isolated control.

How it works

1. onLayout converts the component width into a responsive 88% track and a local travel distance.
2. One continuous Reanimated value covers the full state machine: 0–1 is the drag, 1–2.1 is the expansion and rotating ring, and 2.1–3 draws the check and reveals the badge.
3. Gesture velocity contributes to the completion decision. A release before 85% returns with an interruptible spring.
4. The prompt is Skia text with a moving LinearGradient shader, so the highlight remains inside the letterforms.
5. The white thumb expands to the full track before the Lucide loading ring rotates for 700 ms and the Lucide check path draws with end.
6. A press activates the same sequence for keyboard, switch, and touch users who cannot drag.

Install

npx expo install expo-linear-gradient @shopify/react-native-skia react-native-gesture-handler react-native-reanimated react-native-worklets

Wrap the app root with GestureHandlerRootView. On web, initialize CanvasKit before loading this component, following Expo's React Native Skia setup.

Usage

import { SlideToPay } from './slide-to-pay';

export function Checkout() {
  return (
    <SlideToPay amount="$64.00" onComplete={() => submitOrder()}>
      <OrderSummary />
    </SlideToPay>
  );
}

Customize the visual personality and control it with a ref:

import { useRef } from 'react';
import { SlideToPay, type SlideToPayRef } from './slide-to-pay';

const paymentRef = useRef<SlideToPayRef>(null);

<SlideToPay
  ref={paymentRef}
  accentColor="#FB923C"
  amount="$64.00"
  bottomInset={24}
  labelFont={require('./Geist-Medium.ttf')}
  shimmerColor="#FED7AA"
  successBadge={<PaidBadge />}
  successBadgeStyle={{ right: 24, top: 180 }}
/>;

paymentRef.current?.complete();
paymentRef.current?.reset();

Props

The forwarded ref exposes complete() and reset().

Compatibility

• Expo SDK 58
• React Native 0.88
• Reanimated 4.7 and Worklets 0.13
• React Native Skia 2.14
• iOS: supported
• Android: supported
• Web: supported
• Works in Expo Go because the required native modules are included in the SDK

Accessibility

The 64 pt track exceeds the minimum touch target and exposes a labeled adjustable control with an activate action. A normal press runs the same completion as a drag. With reduced motion enabled, the component presents the final paid state immediately, without translation, rotation, or spring motion.