React Native Slider Button with Drag Confirmation

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

import { useRef, useState } from 'react';
import { Pressable, StyleSheet, Text, View } from 'react-native';
import { Gesture, GestureDetector, GestureHandlerRootView } from 'react-native-gesture-handler';
import Animated, {
  cancelAnimation, useAnimatedStyle, useReducedMotion,
  useSharedValue, withSpring,
} from 'react-native-reanimated';
import { scheduleOnRN } from 'react-native-worklets';

type Status = 'idle' | 'pending' | 'complete' | 'error';

export function SlideToConfirm({ onConfirm }: { onConfirm: () => Promise<void> }) {
  const [status, setStatus] = useState<Status>('idle');
  const [width, setWidth] = useState(0);
  const busy = useRef(false);
  const progress = useSharedValue(0);
  const origin = useSharedValue(0);
  const locked = useSharedValue(false);
  const reduceMotion = useReducedMotion();
  const travel = Math.max(1, width - 56);
  const available = status === 'idle' || status === 'error';

  async function confirm() {
    if (busy.current) return;
    busy.current = true;
    locked.set(true);
    progress.set(1);
    setStatus('pending');
    try {
      await onConfirm();
      setStatus('complete');
    } catch {
      setStatus('error');
      progress.set(reduceMotion ? 0 : withSpring(0, { damping: 22, stiffness: 220 }));
      locked.set(false);
      busy.current = false;
    }
  }

  const pan = Gesture.Pan()
    .enabled(available && width > 56)
    .activeOffsetX([-6, 6])
    .failOffsetY([-16, 16])
    .onStart(() => {
      if (locked.get()) return;
      cancelAnimation(progress);
      origin.set(progress.get());
    })
    .onUpdate((event) => {
      if (!locked.get()) {
        progress.set(Math.max(0, Math.min(1, origin.get() + event.translationX / travel)));
      }
    })
    .onEnd(() => {
      if (locked.get()) return;
      if (progress.get() >= 0.85) {
        locked.set(true);
        progress.set(1);
        scheduleOnRN(confirm);
      } else {
        progress.set(reduceMotion ? 0 : withSpring(0, { damping: 22, stiffness: 220 }));
      }
    })
    .onFinalize((_event, success) => {
      if (!success && !locked.get()) {
        progress.set(reduceMotion ? 0 : withSpring(0, { damping: 22, stiffness: 220 }));
      }
    });

  const thumbStyle = useAnimatedStyle(() => ({
    transform: [{ translateX: progress.get() * travel }],
  }));
  const fillStyle = useAnimatedStyle(() => ({ width: 28 + progress.get() * travel }));

  return (
    <View style={styles.control}>
      <GestureDetector gesture={pan} touchAction="pan-y">
        <Animated.View
          accessible={false}
          accessibilityElementsHidden
          importantForAccessibility="no-hide-descendants"
          onLayout={({ nativeEvent }) => setWidth(nativeEvent.layout.width)}
          style={styles.track}
        >
          <Animated.View pointerEvents="none" style={[styles.fill, fillStyle]} />
          <Text style={styles.prompt}>Slide to confirm</Text>
          <Animated.View pointerEvents="none" style={[styles.thumb, thumbStyle]}>
            <Text style={styles.arrow}>→</Text>
          </Animated.View>
        </Animated.View>
      </GestureDetector>
      <Text accessibilityLiveRegion="polite" style={styles.status}>
        {status === 'pending' ? 'Confirming…' : status === 'complete' ? 'Confirmed' :
          status === 'error' ? 'Could not confirm. Try again.' : 'Slide or use the button below.'}
      </Text>
      <Pressable accessibilityRole="button" accessibilityLabel="Confirm action"
        accessibilityState={{ disabled: !available, busy: status === 'pending' }}
        disabled={!available} onPress={() => { void confirm(); }} style={styles.button}>
        <Text>{status === 'error' ? 'Retry confirmation' : 'Confirm'}</Text>
      </Pressable>
    </View>
  );
}

const styles = StyleSheet.create({
  control: { width: '100%', maxWidth: 400, alignSelf: 'center', gap: 12, direction: 'ltr' },
  track: { height: 56, borderRadius: 28, overflow: 'hidden', backgroundColor: '#E5E1EF',
    justifyContent: 'center' },
  fill: { position: 'absolute', left: 0, height: 56, backgroundColor: '#C5B4EC' },
  prompt: { textAlign: 'center', color: '#292136', paddingHorizontal: 56 },
  thumb: { position: 'absolute', left: 0, width: 56, height: 56, borderRadius: 28,
    backgroundColor: '#6144AD', alignItems: 'center', justifyContent: 'center' },
  arrow: { color: '#FFFFFF', fontSize: 24 },
  status: { textAlign: 'center', color: '#292136' },
  button: { minHeight: 48, alignItems: 'center', justifyContent: 'center',
    borderRadius: 12, borderWidth: 1, borderColor: '#6144AD', paddingHorizontal: 16 },
});

export function ConfirmationExample() {
  const [confirmed, setConfirmed] = useState(false);
  return (
    <GestureHandlerRootView style={{ flex: 1, justifyContent: 'center', padding: 24, gap: 24 }}>
      <Text>{confirmed ? 'Choice saved in this example.' : 'Ready to save your choice.'}</Text>
      <SlideToConfirm onConfirm={async () => { setConfirmed(true); }} />
    </GestureHandlerRootView>
  );
}