Component

SwipeDeck

A Tinder-style card deck. Fling cards left, right, or up.

Preview

How to use AI prompt

How to use

Minimal, copy-pasteable code.

Discover.tsx

import { GestureHandlerRootView } from "react-native-gesture-handler";
import { SwipeDeck } from "react-native-foonto";
import { View, Text, StyleSheet } from "react-native";

const PROFILES = [
  { id: "1", name: "Ada Lovelace", role: "Mathematician" },
  { id: "2", name: "Linus Torvalds", role: "Engineer" },
  { id: "3", name: "Grace Hopper", role: "Computer Scientist" },
];

export default function Discover() {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <SwipeDeck
        data={PROFILES}
        stackSize={3}
        swipeThreshold={0.25}
        renderCard={(item) => (
          <View style={styles.card}>
            <Text style={styles.name}>{item.name}</Text>
            <Text style={styles.role}>{item.role}</Text>
          </View>
        )}
        onSwipeRight={(item) => console.log("liked", item.name)}
        onSwipeLeft={(item) => console.log("passed", item.name)}
        onSwipeTop={(item) => console.log("super liked", item.name)}
        onEnd={() => console.log("no more cards")}
      />
    </GestureHandlerRootView>
  );
}

const styles = StyleSheet.create({
  card: {
    flex: 1,
    borderRadius: 24,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center",
    shadowColor: "#000",
    shadowOpacity: 0.1,
    shadowRadius: 16,
    elevation: 4,
  },
  name: { fontSize: 24, fontWeight: "700", color: "#111" },
  role: { fontSize: 16, color: "#666", marginTop: 6 },
});

Props

Prop	Type	Default	Description
`data`req	`T[]`	—	Cards to render. The first item is the bottom of the stack.
`renderCard`req	`(item: T, index: number) => ReactNode`	—	Render the visual content of a single card.
`onSwipe`	`(item, index, direction) => void`	—	Fired when any card is swiped off the deck.
`onSwipeLeft`	`(item, index) => void`	—	Fired on a left swipe.
`onSwipeRight`	`(item, index) => void`	—	Fired on a right swipe.
`onSwipeTop`	`(item, index) => void`	—	Fired on an upward “super like” swipe.
`onEnd`	`() => void`	—	Fired after the last card leaves the deck.
`swipeThreshold`	`number`	0.25	Fraction of screen width past which a release commits the swipe (0–1).
`stackSize`	`number`	3	Number of cards rendered behind the top card.
`disableTopSwipe`	`boolean`	false	Disable the upward “super like” swipe.
`style`	`FoontoStyle`	—	Style for the deck container.
`cardStyle`	`FoontoStyle`	—	Style applied to every card wrapper.

SwipeDeck is generic over your item type T — callbacks receive the typed item.

AI prompt

Install the library, then paste this into your AI coding agent to wire it up.

AI prompt

Add a Tinder-style swipe card deck to my React Native app using the `react-native-foonto` library.

1. Make sure these packages are installed: `react-native-foonto`, `react-native-reanimated`, `react-native-gesture-handler`. If they aren't, install them.
2. Confirm my app root is wrapped once in `<GestureHandlerRootView style={{ flex: 1 }}>`. If it isn't, wrap it.
3. Create a screen that imports `SwipeDeck` from `react-native-foonto`.
4. Pass it a `data` array of card objects and a `renderCard` function that returns a styled card View for one item.
5. Wire up `onSwipeLeft`, `onSwipeRight`, and `onSwipeTop` callbacks, plus `onEnd` for when the deck is empty.
6. Set `stackSize={3}` and `swipeThreshold={0.25}` for a natural feel.
7. Style the cards with rounded corners and a soft shadow so the stack reads clearly.
8. Do not put per-frame logic on the JS thread — let the library drive the gesture animation on the UI thread.