React Native Swipe Deck
  • English

      • Deck Hooks

      Factory hooks expose deck state, actions, and interaction values without a provider prop or controller object.

      const ProfileDeck = createSwipeDeck<Profile>();

      useDeckState(id?)

      Returns React-rendered deck state.

      FieldMeaning
      activeIndexCurrent active item index, or -1 before attach.
      countTotal item count in the attached deck.
      isCompletedWhether the deck has consumed all items.
      canSwipeWhether a dismiss action can currently be accepted.
      canUndoWhether the latest valid swipe can currently be restored.
      function Counter() {
  const { activeIndex, count, isCompleted } = ProfileDeck.useDeckState();
  const current = activeIndex >= 0 ? activeIndex + 1 : 0;

  return <Text>{isCompleted ? 'Done' : `${current} / ${count}`}</Text>;
}

      Derive the current item from your own data[activeIndex] when needed. Deck state stays primitive and stable.

      useDeckActions(id?)

      Returns stable action callbacks.

      function Controls() {
  const { canSwipe, canUndo } = ProfileDeck.useDeckState();
  const { swipeLeft, swipeRight, undo } = ProfileDeck.useDeckActions();

  return (
    <View>
      <Pressable disabled={!canSwipe} onPress={swipeLeft}>
        <Text>Nope</Text>
      </Pressable>
      <Pressable disabled={!canUndo} onPress={undo}>
        <Text>Undo</Text>
      </Pressable>
      <Pressable disabled={!canSwipe} onPress={swipeRight}>
        <Text>Like</Text>
      </Pressable>
    </View>
  );
}

      swipeLeft() and swipeRight() return true when accepted and false when the deck is unattached, disabled, animating, unmeasured, completed, or the direction is not allowed. undo() returns true when canUndo is true, including after the deck is completed.

      useDeckInteraction(id?)

      Returns Reanimated shared values for progress-driven UI.

      function SwipeReactionOverlay() {
  const { signedProgress } = ProfileDeck.useDeckInteraction();

  const likeStyle = useAnimatedStyle(() => {
    const progress = Math.max(signedProgress.get(), 0);

    return {
      opacity: progress,
      transform: [{ scale: 0.9 + progress * 0.18 }],
    };
  });

  return <Animated.View pointerEvents="none" style={likeStyle} />;
}

      Interaction values update on the UI thread and do not rerender React every gesture frame.

      ValueMeaning
      progressAbsolute swipe progress from 0 to 1.
      signedProgressSigned progress from -1 to 1.
      directionRaw live direction signal: -1, 0, or 1.
      dismissDirectionAccepted dismiss side: 'left', 'right', or null.
      translationXActive card horizontal translation.
      translationYActive card vertical translation.
      isDraggingWhether the deck is dragging or dismissing.
      phaseidle, dragging, dismissing, or undoing.

      Use phase for frame-synchronous visual feedback. Use event hooks for committed state changes.