A Wallet-style stack that fans open on tap and slides the picked card to the front.
Installation
One command copies the source into your app — you own the code and can change anything.
Usage
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. | T[] | — |
| renderItem Render a card. `front` is true for the card in front. | ({ item, index, front }) => ReactNode | — |
| keyExtractor React key for each card. | (item: T, index: number) => string | index |
| cardHeight Card height. | number | 190 |
| peek How much of each card shows behind the front one when closed. | number | 14 |
| spread Space between cards when open. | number | 64 |
| depth Cards visible behind the front one when closed. | number | 3 |
| selected Controlled front card (index into data). | number | — |
| onPressFront Tap on the front card while closed (pay with it); the cards behind still open the stack. | (index) => void | — |
| getAccessibilityLabel Screen-reader label for each card. | (item, index) => string | "Card 2 of 4" |
| defaultSelected Uncontrolled initial front card. | number | 0 |
| onSelect Fires when a card is picked. | (index: number) => void | — |
| open Controlled open state. | boolean | — |
| onOpenChange Fires when the stack opens or closes. | (open: boolean) => void | — |
| radius Corner radius of each card. | number | 18 |
| style Style for the root view. | StyleProp<ViewStyle> | — |
Behaviour & accessibility
- Touch
- Tap the closed stack to fan it open, then tap a card to bring it to the front as the stack closes. With onPressFront, a tap on the front card calls it instead.
- Motion
- Cards behind the front one shrink and tilt back in 3D depth. Opening, closing and reordering all run on springs.
- Screen readers
- Each card is a button with selected and expanded state, labelled "Card 2 of 4" by default or by getAccessibilityLabel.
Source
Did you like the content?