Programmatic Actions

Programmatic action은 useDeckActions()에서 가져옵니다. 버튼, 외부 control, 앱 로직에서 active card를 dismiss할 때 사용하세요.

function LikeButton() {
  const { swipeRight } = ProfileDeck.useDeckActions();

  return (
    <Pressable onPress={swipeRight}>
      <Text>Like</Text>
    </Pressable>
  );
}

Action Motion

motion은 manual drag feel을 제어합니다. actionMotionswipeLeft()swipeRight() 같은 programmatic action만 제어합니다.

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

const ProfileDeck = createSwipeDeck<Profile>({
  motion: SwipeDeckMotion.tinder(),
  actionMotion: SwipeDeckActionMotion.springboard({
    anticipationDistance: ({ width }) => width * 0.04,
    anticipationDuration: 80,
    dismissDuration: 320,
  }),
});

Recipe

SwipeDeckActionMotion.direct(options?)

Action 방향으로 바로 dismiss합니다. 생략한 값은 deck에서 resolve된 dismiss duration, easing, offscreen multiplier를 재사용합니다.

actions.swipeLeft(
  SwipeDeckActionMotion.direct({
    duration: 180,
  }),
);

SwipeDeckActionMotion.springboard(options?)

최종 방향의 반대쪽으로 살짝 움직인 뒤 화면 밖으로 dismiss합니다. Anticipation 동안 swipe progress와 live direction은 neutral 상태로 유지되어 반대쪽 overlay가 순간적으로 보이지 않습니다.

const actionMotion = SwipeDeckActionMotion.springboard({
  anticipationDistance: 40,
  anticipationDuration: 160,
  dismissDuration: 500,
});

우선순위

actionMotion은 deep merge가 아니라 replacement 방식입니다.

  1. createSwipeDeck({ actionMotion })의 factory actionMotion
  2. 해당 Root에서 factory default를 대체하는 Root actionMotion
  3. swipeLeft(recipe) 또는 swipeRight(recipe)에 넘긴 per-call recipe

Action은 callback으로 바로 넘겨도 안전합니다. React Native press event가 swipeRight 또는 swipeLeft로 전달되면 그 event 인자는 무시됩니다.