React Native Swipe Deck
  • 한국어

      • API 레퍼런스

      주요 export

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

      Source 보기

      createSwipeDeck<T>(config?)

      Typed deck family를 만듭니다.

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

      반환되는 instance는 다음을 포함합니다.

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

      SwipeDeck.Root props

      Source 보기

      PropType설명
      idstringFactory-scoped deck namespace입니다.
      datareadonly T[]Deck이 렌더링할 ordered item입니다.
      getKey(item: T, index: number) => string필수 stable item key입니다.
      initialIndexnumber초기 active item index입니다.
      disabledbooleanaccepted action과 gesture를 비활성화합니다.
      allowedDirectionsAllowedDirections허용할 dismiss direction을 제한합니다.
      swipeThresholdSwipeThresholdRoot-level dismiss threshold override입니다.
      velocityThresholdnumberRoot-level flick threshold override입니다.
      motionSwipeDeckMotionPresetGesture-driven motion preset입니다.
      actionMotionSwipeDeckActionMotionRecipeProgrammatic swipe motion recipe입니다.
      undoMotionSwipeDeckUndoMotionRecipeProgrammatic undo restore motion recipe입니다.
      undoEnabledbooleanUndo history tracking을 활성화합니다.
      visibleCardCountnumberForward mounted card의 최대 budget입니다.
      containerStyleStyleProp<ViewStyle>Deck container에 적용할 style입니다.
      childrenReactNodeMatching SwipeDeck.Card를 포함해야 합니다.
      type AllowedDirections = readonly ('left' | 'right' | 'up')[];
type SwipeThreshold = number | ((layout: SwipeDeckLayout) => number);

      Static SwipeDeck.Root는 id를 제외한 같은 props를 받습니다.

      전체 id contract는 Multi-Instance Management를 참고하세요.

      id는 item key가 아닙니다. "nearby", "recommended" 같은 안정적인 deck namespace나, 화면이 mount되어 있는 동안 변하지 않는 navigation route key를 사용하세요. 해당 id를 retain하는 committed Root 또는 public hook consumer가 하나 이상 mount되어 있는 동안 identity가 안정적으로 유지됩니다. 마지막 cleanup과 deferred eviction 이후 같은 id를 다시 사용하면 새 action과 interaction shared value를 받습니다. Item id, timestamp, mounted lifecycle 중에 바뀌는 값에서 id를 만들지 마세요. 같은 factory의 Root 두 개가 동시에 mount되려면 여전히 서로 다른 id가 필요합니다.

      SwipeDeck.Card props

      PropType설명
      interactiveboolean | ((info: SwipeRenderInfo<T>) => boolean)Active card 안의 touchable children을 활성화합니다.
      styleStyleProp<ViewStyle>Absolute card container에 적용됩니다.
      children(info: SwipeRenderInfo<T>) => ReactNodeBounded window의 item 하나를 렌더링합니다.

      SwipeRenderInfo<T>는 item, index, offset, role, isActive를 포함합니다.

      State와 Actions

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

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

      Programmatic action은 action이 받아들여졌는지 알려주는 boolean을 반환합니다.

      Interaction

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

      SwipeDirection은 'left' | 'right' | 'up'입니다. allowedDirections를 생략하면 left와 right만 허용되고 upward dismiss는 opt-in입니다.

      useDeckInteraction()은 progress, signedProgress, direction, intentDirection, dismissDirection, translationX, translationY, isDragging, phase Reanimated shared value를 반환합니다. intentDirection은 overlay용 policy-filtered live semantic source이며 'left', 'right', 'up', null이 될 수 있습니다. Centered upward gesture만 internal up cone에 들어가고, 일반적인 upper-left/upper-right diagonal은 horizontal intent로 남습니다. 해당 raw horizontal winner가 허용되지 않으면 intentDirection, progress, signedProgress는 neutral이고 card translation은 손가락을 그대로 따릅니다. signedProgress와 numeric direction은 horizontal-only라 upward intent/dismiss 중에는 0입니다. dismissDirection은 dismiss가 accepted된 뒤 'left', 'right', 'up', null이 될 수 있습니다.

      Events

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

      최신 event snapshot에는 useDeckEvent를, imperative subscription에는 useDeckEventListener를 사용하세요.

      Motion Helpers

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

      동작 세부 사항은 이 reference보다 guide page를 먼저 참고하는 것을 권장합니다.