React Native Swipe Deck
  • English

      • Multi-Instance Management

      Use id only when you render multiple roots from the same factory.

      function MultiDeckScreen() {
  const nearbyState = ProfileDeck.useDeckState('nearby');

  return (
    <>
      <ProfileDeck.Root id="recommended" data={recommended} getKey={(item) => item.id}>
        <ProfileDeck.Card>{({ item }) => <ProfileCard profile={item} />}</ProfileDeck.Card>
      </ProfileDeck.Root>

      <ProfileDeck.Root id="nearby" data={nearby} getKey={(item) => item.id}>
        <ProfileDeck.Card>{({ item }) => <ProfileCard profile={item} />}</ProfileDeck.Card>
      </ProfileDeck.Root>

      <Text>{nearbyState.activeIndex + 1}</Text>
    </>
  );
}

      Id Rules

      Use a stable id per mounted deck

      id is a factory-scoped deck namespace, not an item key. Different factories can safely use the same id, but simultaneous Roots from one factory must use distinct ids. A stable navigation route key is supported as long as it does not change while the screen is mounted.

      • Use screen-level names such as "nearby" or "recommended", or a navigation route key that remains stable for one mounted screen.
      • Give simultaneous Roots from the same factory distinct ids. The duplicate-Root rule is unchanged: two mounted Roots from the same factory and same id are invalid.
      • Do not derive ids from item ids, timestamps, values that change per render, or values that change while the screen is mounted.
      • Create factories outside render paths, and keep each id stable for the mounted lifecycle.

      The registry keeps hooks, actions, and interaction shared values stable while at least one committed Root or public hook consumer retains that id. After the final committed consumer cleans up and the registry finishes its deferred eviction, a later consumer for the same id receives fresh actions and interaction shared values.

      Never-committed abandoned renders are a known best-effort cleanup limitation: if a render reads a brand-new id but React never commits it, there is no committed cleanup path for the library to observe. Avoid creating ids from values that change while a screen is mounted.

      Same-Factory Rule

      Hooks, actions, and interactions only connect to Roots created by the same factory instance.

      const ProfileDeck = createSwipeDeck<Profile>();

export const {
  Root: ProfileDeckRoot,
  Card: ProfileDeckCard,
  useDeckState: useProfileDeckState,
  useDeckActions: useProfileDeckActions,
  useDeckInteraction: useProfileDeckInteraction,
} = ProfileDeck;

      Calling createSwipeDeck<Profile>() again creates a separate registry namespace even when the item type and id are the same.