Swipe Deck

A stack of cards swiped away one at a time. The top card follows the finger and tilts with it, the card underneath grows to take its place, and release either flies the card off or springs it back. Each swipe is also a screen reader action, so the deck works without the gesture. Built for React Native and Expo with react-native only; this page previews it in the browser through react-native-web.

Installation

CLI

npx @modus-ui/cli add swipe-deck

Manual

1. Copy the code from the component tab.
2. Create a file at components/ui/swipe-deck.tsx.
3. Paste the code.

It needs no packages beyond react-native, which your Expo or React Native app already has.

Usage

import { Text, View } from "react-native";
import { SwipeDeck } from "@/components/ui/swipe-deck";

const places = [
  { id: "lisbon", city: "Lisbon" },
  { id: "kyoto", city: "Kyoto" },
];

export default function Example() {
  return (
    <View style={{ height: 420, padding: 20 }}>
      <SwipeDeck
        data={places}
        keyExtractor={(place) => place.id}
        renderCard={(place) => <Text style={{ padding: 20, fontSize: 28 }}>{place.city}</Text>}
        onSwipe={(place, direction) => console.log(place.city, direction)}
      />
    </View>
  );
}

The deck fills its parent, so give the parent a height.

Props