React Native Swipe Deck
  • English

      • API Reference

      Main Exports

      export {
  SwipeDeckActionMotion,
  SwipeDeckMotion,
  createSwipeDeck,
  SwipeDeck,
  SwipeDeckUndoMotion,
} from '@react-native-motion-kit/swipe-deck';

      Go to source

      createSwipeDeck<T>(config?)

      Creates a typed deck family.

      const ProfileDeck = createSwipeDeck<Profile>({
  motion: SwipeDeckMotion.tinder(),
});

      The returned instance includes:

      • Root
      • Card
      • useDeckState
      • useDeckActions
      • useDeckInteraction
      • useDeckEvent
      • useDeckEventListener

      SwipeDeck.Root Props

      Go to source

      PropTypeNotes
      idstringFactory-scoped deck namespace.
      datareadonly T[]Ordered items rendered by the deck.
      getKey(item: T, index: number) => stringRequired stable item key.
      initialIndexnumberInitial active item index.
      disabledbooleanDisables accepted actions and gestures.
      allowedDirectionsAllowedDirectionsLimits accepted dismiss directions.
      swipeThresholdSwipeThresholdRoot-level dismiss threshold override.
      velocityThresholdnumberRoot-level flick threshold override.
      motionSwipeDeckMotionPresetGesture-driven motion preset.
      actionMotionSwipeDeckActionMotionRecipeProgrammatic swipe motion recipe.
      undoMotionSwipeDeckUndoMotionRecipeProgrammatic undo restore motion recipe.
      undoEnabledbooleanEnables undo history tracking.
      visibleCardCountnumberMaximum mounted forward card budget.
      containerStyleStyleProp<ViewStyle>Style applied to the deck container.
      childrenReactNodeMust include a matching SwipeDeck.Card.
      type AllowedDirections = readonly ('left' | 'right')[];
type SwipeThreshold = number | ((layout: SwipeDeckLayout) => number);

      Static SwipeDeck.Root accepts the same props except id.

      SwipeDeck.Card Props

      PropTypeNotes
      styleStyleProp<ViewStyle>Style applied to the absolute card.
      children(info: SwipeRenderInfo<T>) => ReactNodeRenders one item in the bounded window.

      SwipeRenderInfo<T> includes item, index, offset, role, and isActive.

      State And Actions

      type SwipeDeckState = {
  activeIndex: number;
  count: number;
  isCompleted: boolean;
  canSwipe: boolean;
  canUndo: boolean;
};

type SwipeDeckActions = {
  swipeLeft: SwipeDeckAction;
  swipeRight: SwipeDeckAction;
  undo: SwipeDeckUndoAction;
};

      Programmatic actions return boolean to tell whether the action was accepted.

      Interaction

      type SwipeDeckInteractionPhase = 'idle' | 'dragging' | 'dismissing' | 'undoing';

      useDeckInteraction() returns Reanimated shared values for progress, signedProgress, direction, dismissDirection, translationX, translationY, isDragging, and phase.

      Events

      type SwipeDeckEventMap<T> = {
  swipe: SwipeEvent<T>;
  undo: UndoEvent<T>;
  indexChange: { index: number };
  endReached: true;
};

      Use useDeckEvent for latest event snapshots and useDeckEventListener for imperative subscriptions.

      Motion Helpers

      • SwipeDeckMotion.tinder(options?)
      • SwipeDeckActionMotion.direct(options?)
      • SwipeDeckActionMotion.springboard(options?)
      • SwipeDeckUndoMotion.spring(options?)
      • SwipeDeckUndoMotion.timing(options?)

      For behavior details, prefer the guide pages over treating this reference as an onboarding surface.