React Native Swipe Deck
  • English

      • Basic Usage

      Factory API

      The factory API is the primary API. Use it when a deck needs hooks, actions, events, interaction shared values, or multiple named instances.

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

const ProfileDeck = createSwipeDeck<Profile>();

function Screen() {
  return (
    <ProfileDeck.Root data={profiles} getKey={(item) => item.id}>
      <ProfileDeck.Card>{({ item }) => <ProfileCard profile={item} />}</ProfileDeck.Card>
    </ProfileDeck.Root>
  );
}

      The factory keeps Root, Card, and hooks on the same item type without repeating generics in JSX.

      Card Render Info

      Card receives render info for each mounted item.

      FieldMeaning
      itemThe item from your data array.
      indexThe item index in data.
      offsetThe card offset from the active item.
      role'current' for the active card, 'next' for buffered.
      isActivetrue only for the active card.
      <ProfileDeck.Card>
  {({ item, role, isActive }) => <ProfileCard profile={item} role={role} active={isActive} />}
</ProfileDeck.Card>

      Allowed Directions

      allowedDirections limits which directions can be accepted as a dismiss.

      <ProfileDeck.Root data={profiles} getKey={(item) => item.id} allowedDirections={['right']}>
  <ProfileDeck.Card>{({ item }) => <ProfileCard profile={item} />}</ProfileDeck.Card>
</ProfileDeck.Root>
      • Omit allowedDirections to allow both directions.
      • Pass ['left'] or ['right'] to allow only one dismiss direction.
      • Pass [] to allow dragging but reject every dismiss release and programmatic swipe action.

      Static API

      Use the static API only when you need inline card rendering and do not need factory hooks.

      import { SwipeDeck } from '@react-native-motion-kit/swipe-deck';

function InlineDeck() {
  return (
    <SwipeDeck.Root data={profiles} getKey={(item) => item.id}>
      <SwipeDeck.Card<Profile>>{({ item }) => <ProfileCard profile={item} />}</SwipeDeck.Card>
    </SwipeDeck.Root>
  );
}

      Static Root does not accept id, and static Root / Card do not share a factory type. Pass the item type to Card when you want typed render props.