A mail-style row whose actions fan out and grow as you drag it sideways.
Pro<SwipeableRow />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 |
|---|---|---|
| leftActions Revealed by swiping right; the first is the edge (full-swipe) action. | SwipeAction[] | [] |
| rightActions Revealed by swiping left; the last is the edge (full-swipe) action. | SwipeAction[] | [] |
| SwipeAction destructive collapses the row before calling onPress. | { label, color, icon?, onPress?, destructive? } | — |
| actionWidth Width of each action when resting open. | number | 76 |
| fullSwipe Swiping past half the row fires the edge action. | boolean | true |
| closeOnActionPress Spring closed after an action is tapped. | boolean | true |
| onOpen / onClose Open state callbacks. | (side) => void / () => void | — |
| disabled Turns swiping off. | boolean | false |
| contentStyle Style of the sliding foreground — keep its background opaque. | StyleProp<ViewStyle> | theme background |
| style Style for the outer row that holds the actions behind the sliding content. | StyleProp<ViewStyle> | — |
Behaviour & accessibility
- Touch
- Drag sideways to reveal the actions; a full swipe past half the row fires the edge action. Tap the open row to close it.
- Motion
- Actions fan out and grow with your finger, the edge action stretches across on a full swipe, and destructive actions slide away and collapse the row.
- Screen readers
- Every action is offered as a named accessibility action on the row, and each revealed action is a labelled button.
- Web
- Built on PanResponder, so a mouse drag works too; the row shows a grab cursor and text selection is turned off.
Source
Did you like the content?