#Programmatic Actions

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

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

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

swipeUp()은 Root의 allowedDirections에 'up'이 명시되어 있을 때만 받아들여집니다. Gesture up은 free drag mode가 필요하지만, programmatic swipeUp()은 horizontal drag mode에서도 사용할 수 있습니다.

#Action Motion

motion은 manual drag feel을 제어합니다. actionMotion은 swipeLeft(), swipeRight(), swipeUp() 같은 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), swipeUp(recipe)에 넘긴 per-call recipe

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