React Native Swipe Deck
  • 한국어

      • Deck Hooks

      Factory hook은 Provider prop이나 controller object 없이 deck state, action, interaction 값을 제공합니다.

      const ProfileDeck = createSwipeDeck<Profile>();

      useDeckState(id?)

      React로 렌더링되는 deck state를 반환합니다.

      Field의미
      activeIndex현재 active item index입니다. attach 전에는 -1입니다.
      countattach된 deck의 전체 item 수입니다.
      isCompleted모든 item을 소비했는지 여부입니다.
      canSwipedismiss action이 현재 받아들여질 수 있는지 여부입니다.
      canUndo최신 valid swipe를 현재 복원할 수 있는지 여부입니다.
      function Counter() {
  const { activeIndex, count, isCompleted } = ProfileDeck.useDeckState();
  const current = activeIndex >= 0 ? activeIndex + 1 : 0;

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

      현재 item이 필요하면 사용자의 data[activeIndex]에서 직접 계산하세요. Deck state는 primitive하고 stable하게 유지됩니다.

      useDeckActions(id?)

      Stable action callback을 반환합니다.

      function Controls() {
  const { canSwipe, canUndo } = ProfileDeck.useDeckState();
  const { swipeLeft, swipeRight, swipeUp, 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>
      <Pressable disabled={!canSwipe} onPress={swipeUp}>
        <Text>Up</Text>
      </Pressable>
    </View>
  );
}

      swipeLeft(), swipeRight(), swipeUp()은 action이 받아들여지면 true, deck이 unattached, disabled, animating, unmeasured, completed 상태이거나 direction이 허용되지 않으면 false를 반환합니다. swipeUp()은 allowedDirections에 'up'이 있어야 하지만 horizontal drag mode에는 막히지 않습니다. undo()는 deck 완료 후에도 canUndo가 true이면 true를 반환합니다.

      useDeckInteraction(id?)

      Progress 기반 UI를 위한 Reanimated shared value를 반환합니다.

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

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

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

  const upStyle = useAnimatedStyle(() => {
    const upProgress = intentDirection.get() === 'up' ? progress.get() : 0;

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

  return (
    <View pointerEvents="none">
      <Animated.Text style={likeStyle}>LIKE</Animated.Text>
      <Animated.Text style={upStyle}>SUPER LIKE</Animated.Text>
    </View>
  );
}

      Interaction value는 UI thread에서 업데이트되고 gesture frame마다 React rerender를 만들지 않습니다.

      Value의미
      progress0부터 1까지의 dominant enabled-axis progress입니다.
      signedProgresshorizontal signed progress입니다. Up은 0입니다.
      directionhorizontal live signal입니다. -1, 0, 1; up은 0.
      intentDirectionpolicy-filtered live semantic intent입니다. 'left', 'right', 'up', null.
      dismissDirectionaccepted dismiss side입니다. 'left', 'right', 'up', null.
      translationXactive card의 horizontal translation입니다.
      translationYactive card의 vertical translation입니다.
      isDraggingdeck이 dragging 또는 dismissing 중인지 여부입니다.
      phaseidle, dragging, dismissing, undoing.

      한 번에 하나의 reaction overlay를 보여줄 때는 intentDirection을 사용하세요. 이 값은 drag frame마다 업데이트되고, accepted direction은 dismiss 중 유지되며, 다른 interaction value와 함께 reset됩니다. Frame-synchronous visual feedback에는 phase를 사용하세요. Commit된 state 변화에는 event hook을 사용하세요.