Swipeable row
A row whose actions show under a swipe: left for the trailing ones, right for the leading ones, a full swipe runs the outermost.
Mobile only — React Native, from @krizaka/ui/native. Beta: its API may still change in a minor version.
Why it is here. the native apps: Yasakia (PY4), Yororis (PYO2), Orochia mobile (PS6), Orazaka mobile: archive / delete on a row of a list.
When to use
- A conversation: pin, archive, delete.
- A notification: mark read, delete.
When not to use
- For the only way to reach an action: offer it in the row's menu too.Use instead: Action sheet
Installation
Install
npx expo install react-native-svg
npm install @krizaka/uiImport
import { SwipeableRow } from "@krizaka/ui/native";Wrap the app once in ThemeProvider from @krizaka/ui/native: every component reads its colour roles.
Examples
React Native has no live preview on the web: each example shows the screenshot of its story, tested in both themes, and the code to copy.
A conversation
Pin on the right swipe; archive and delete on the left.
Props
A row whose actions show under a swipe — mail-style: swipe left for the trailing actions, right for the leading ones, a full swipe runs the outermost one, a tick marks the threshold. Screen readers get the same actions from the rotor (accessibility actions): nothing is reachable only by a gesture.
| Prop | Type | Default | Description |
|---|---|---|---|
childrenrequired | ReactNode | — | The row's content (a ListItem). |
actionWidth | number | 80 | Width of each action, in points. Default 80. |
fullSwipe | number | false | 0.6 | A full swipe past this share of the row runs the outermost action (delete, archive). Default 0.6; false never. |
leading | readonly SwipeAction[] | [] | Revealed by a swipe to the right, at the left edge. |
onActivate | (() => void) | — | The row's own action, for screen readers: the row is one element whose actions are the swipe actions, and
activating it calls this (pass the onPress of the ListItem inside). |
style | StyleProp<ViewStyle> | — | Styles merged last. |
testID | string | — | The test id of the row's moving part (the accessibility element). |
trailing | readonly SwipeAction[] | [] | Revealed by a swipe to the left, at the right edge (the first is the outermost). |
Accessibility
- Each action is an accessibility action (the rotor on iOS, the actions menu on Android): nothing is reachable only by a gesture.
- A medium tick when a full swipe passes its threshold.
Best practices
- Two actions per side at most; the outermost is the one a full swipe runs.
- Destructive actions in
danger, at the far edge.
Related components
Generated from the code of @krizaka/ui 3.8.0: its meta.ts, its examples and its types.Edit this documentation on GitHub