Carousel@knitui/carousel
SwipeDeck
WebiOSAndroid3 style slots23 own props6 examples
import { SwipeDeck } from "@knitui/carousel";Playground
Loading playground…
<SwipeDeck />Examples
Default
The default: drag left/right to nope/like, with LIKE / NOPE stamps.
Loading example…
Super Like
Super-like enabled — drag up as well as left/right.
Loading example…
Fan Effect
The fan effect — cards behind spread out like a hand.
Loading example…
Stack Effect
The stack effect — a calm concentric wallet stack.
Loading example…
Custom Effect
A custom effect worklet — the extensibility seam. Off-center cards tumble in 3-D depth. Any (state) => ViewStyle worklet plugs in the same way.
Loading example…
Imperative Buttons
Buttons drive the deck through the imperative ref — no dragging required.
Loading example…
Props
| Prop | Type | Default | Description |
|---|---|---|---|
data required | T[] | — | The cards, top of the deck first. Consumed as they are swiped away. |
renderCard required | (item: T, index: number) => ReactElement | null | — | Render one card's content. Wrapped in the deck's animated + styled host. |
accessibilityLabel | string | undefined | — | — |
directions | SwipeDirection[] | undefined | — | Which directions commit a swipe (default `["left", "right"]`). |
disabled system | boolean | undefined | — | Disable dragging (imperative `ref` swipes still work). |
effect | DeckEffectName | DeckEffect | undefined | — | Card-transform effect: a built-in name or a custom worklet. Default "tinder". |
effectConfig | DeckEffectConfig | undefined | — | Tuning for the built-in effects. Ignored when `effect` is a custom worklet. |
keyExtractor | ((item: T, index: number) => string) | undefined | — | Stable keys (recommended). Defaults to the data index. |
onActiveIndexChange | ((index: number) => void) | undefined | — | Fired when the top card changes (after a commit settles). |
onEmpty | (() => void) | undefined | — | Fired once the deck runs out of cards. |
onSwipe | ((item: T, index: number, direction: SwipeDirection) => void) | undefined | — | Fired when a card is committed in any direction. |
onSwipeDown | ((item: T, index: number) => void) | undefined | — | — |
onSwipeLeft | ((item: T, index: number) => void) | undefined | — | — |
onSwipeRight | ((item: T, index: number) => void) | undefined | — | — |
onSwipeUp | ((item: T, index: number) => void) | undefined | — | — |
ref | Ref<SwipeDeckRef> | undefined | — | — |
renderEmpty | (() => ReactElement | null) | undefined | — | Rendered once the deck is exhausted (no cards left). |
renderStamp | ((direction: SwipeDirection) => ReactNode) | undefined | — | Per-direction overlay whose opacity is driven by the drag toward that direction (0 at rest → 1 at the commit threshold). Full control. |
stackSize | number | undefined | — | How many cards are mounted/visible in the deck at once (default 3). |
stampLabels | Partial<Record<SwipeDirection, string>> | undefined | — | Convenience built-in stamps — a bordered label per direction, e.g. `{ right: "LIKE", left: "NOPE", up: "SUPER" }`. Superseded by `renderStamp`. |
style | Falsy | (ViewStyle | CSSProperties | (CSSProperties & ViewStyle)) | RegisteredStyle<ViewStyle | CSSProperties | (CSSProperties & ViewStyle)> | RecursiveArray<Falsy | (ViewStyle | CSSProperties | (CSSProperties & ViewStyle)) | RegisteredStyl… | — | Container style — set the deck's width/height here. |
styles system | SlotStyles<DeckStyles> | undefined | — | Per-slot style sugar spread onto the matching styled part (`root` / `card` / `stamp`). Explicit props always win. |
testID | string | undefined | — | — |
threshold | number | undefined | — | Commit distance as a fraction of the card size, 0..1 (default 0.25). |
velocityThreshold | number | undefined | — | Release velocity (px/s) that commits a swipe regardless of distance (default 800). |
Style slots
Every part of SwipeDeck can be styled through the styles prop. Explicit props on the component always win over slot styles.
| Slot | Targets |
|---|---|
card | Every card's visual box (DeckCardBox). |
root | The deck region (DeckFrame). |
stamp | The built-in stamp chip (DeckStamp). |