A card stack you swipe left or right; the top card leans in 3D and stamps a label.
Pro<SwipeDeck />3 variantsiOS · Android · Expo Go
9:41
Installation
One command copies the source into your app — you own the code and can change anything.
Usage
Colours, radius and light / dark come from
useKit(). Wrap your app in <KitProvider accent="#6366f1" radius={14}> to re-skin every component at once.Props
| Prop | Type | Default |
|---|---|---|
| data Items, one card each (top first). | T[] | — |
| renderItem Render a card. | (item: T, index: number) => ReactNode | — |
| keyExtractor React key for each card. | (item: T, index: number) => string | index |
| height Card height. | number | 380 |
| onSwipe Fires when a card leaves, with "left" or "right". | (direction, item, index) => void | — |
| index / onIndexChange Controlled top card; a fresh batch (first key changed) starts from the top on its own. | number / (index) => void | — / — |
| disabled Swiping off (e.g. out of likes). | boolean | false |
| onEmpty Fires once every card is gone. | () => void | — |
| renderEmpty Shown when the deck is empty. | () => ReactNode | — |
| rightLabel / leftLabel Stamp shown while dragging; null hides it. | string | null | "LIKE" / "NOPE" |
| rightColor / leftColor Stamp colours. | string | theme success / danger |
| stack Cards visible behind the top one. | number | 2 |
| radius Corner radius of each card. | number | 24 |
| ref Throw the top card from a button, or bring the last one back; reset() starts again from the first card. | { swipe(direction), undo() } | — |
| style Style for the root view. | StyleProp<ViewStyle> | — |
Behaviour & accessibility
- Touch
- Drag the top card past the threshold or flick it to throw it off; a short drag springs back. A ref exposes swipe, undo and reset for buttons.
- Motion
- The card follows your finger, rotates and tilts in 3D, washes in the right or left colour and shows the stamp, while the next card rises.
- Screen readers
- Only the top card is exposed. It offers the right and left labels as accessibility actions, which throw the card that way.
Source
Did you like the content?