Swiper

(A) One-Line Summary

Swiper is a slide-to-confirm component where users swipe left-to-right to "confirm/execute an action".
The background and text transition based on drag progress, and onSwipeSuccess is called when the threshold is crossed.

(B) Installation (Track A / Track B)

Prerequisite: Import the unistyles side-effect in your app entry file.

• Track A: import '@fleet-ui/local/core/unistyles';
• Track B: import '@fleet-ui/core/unistyles';

Track A (CLI / local install)

pnpm dlx @fleet-ui/cli add Swiper

import { Swiper } from '@fleet-ui/local/components';

Track B (NPM package)

import { Swiper } from '@fleet-ui/components';

Required Dependencies

Swiper uses the following dependencies:

• react-native-gesture-handler, react-native-reanimated (swipe/animation)
• expo-linear-gradient (when variant="gradient")

pnpm add react-native-gesture-handler react-native-reanimated react-native-unistyles

npx expo install expo-linear-gradient

(D) Core Features & Usage

D-1. Basic Usage

import { Swiper } from '@fleet-ui/components';
 
export function Example() {
  return (
    <Swiper
      placeholder="Swipe right to confirm"
      actionTitle="Done!"
      onSwipeSuccess={() => console.log('success')}
      onSwipeCancel={() => console.log('cancel')}
    />
  );
}

D-2. Gradient Variant

When variant="gradient", you can provide a customGradient or use the theme's gradient tokens.

(E) Internal State / Shared Value / Animation

E-1. State Model

• translateX (SharedValue): thumb's horizontal translation
• isCompleting: guard during completion animation (prevents duplicate completion)
• isDragging: whether dragging is in progress (used for thumb scale, etc.)
• thresholdValue: completion threshold clamped to 0–1

E-2. Completion Logic

On drag end:

• Progress is calculated as progress = translateX / maxTranslate
• Completion is triggered if progress >= threshold or velocityX > 500 && progress > 0.7

On completion:

• Thumb animates to the end with withTiming
• Completion callback is invoked
• Resets to 0 after 300ms (ready for reuse)

On cancel:

• translateX returns to 0 and onSwipeCancel is called

(F) Accessibility

Swiper exposes the root as accessibilityRole="button" and allows screen readers to trigger completion via the "activate" action.

• accessibilityActions={[{ name: 'activate' }]}
• onAccessibilityAction: if "activate", performs best-effort completion animation and calls success callback
• Label priority:
  • aria-label (web) → accessibilityLabel → placeholder (string)

(G) Props Table

Reference: SwiperProps from packages/components/src/Swiper/Swiper.types.ts.