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' | 'up')[];
type SwipeThreshold = number | ((layout: SwipeDeckLayout) => number);

      Static SwipeDeck.Root accepts the same props except id.

      See Multi-Instance Management for the complete id contract.

      id is not an item key. Use a stable deck namespace such as "nearby", "recommended", or a navigation route key that does not change while the screen is mounted. Identity is stable while at least one committed Root or public hook consumer remains mounted for that id. After the final cleanup and deferred eviction, a later consumer receives fresh actions and interaction shared values. Do not derive ids from item ids, timestamps, or values that change while mounted. Two simultaneous Roots from the same factory still require distinct ids.

      SwipeDeck.Card Props

      PropTypeNotes
      interactiveboolean | ((info: SwipeRenderInfo<T>) => boolean)Enables touchable children on the active card only.
      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;
  swipeUp: SwipeDeckAction;
  undo: SwipeDeckUndoAction;
};

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

      Interaction

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

      SwipeDirection is 'left' | 'right' | 'up'. Omitted allowedDirections allows only left and right; upward dismisses are opt-in.

      useDeckInteraction() returns Reanimated shared values for progress, signedProgress, direction, intentDirection, dismissDirection, translationX, translationY, isDragging, and phase. intentDirection is the policy-filtered live semantic source for overlays: 'left', 'right', 'up', or null. Only centered upward gestures enter the internal up cone; ordinary upper-left and upper-right diagonals remain horizontal. If that raw horizontal winner is not allowed, intentDirection, progress, and signedProgress stay neutral while card translation still follows the finger. signedProgress and numeric direction remain horizontal-only and are 0 for upward intent or dismiss. dismissDirection can be 'left', 'right', 'up', or null after a dismiss is accepted.

      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.