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 uniquement — React Native, depuis @krizaka/ui/native. Bêta : son API peut encore changer à une version mineure.
Quand l’utiliser
- A conversation: pin, archive, delete.
- A notification: mark read, delete.
Quand ne pas l’utiliser
- For the only way to reach an action: offer it in the row's menu too.À la place : Action sheet
Installation
Installer
npx expo install react-native-svg
npm install @krizaka/uiImporter
import { SwipeableRow } from "@krizaka/ui/native";Enveloppez l’application une fois dans ThemeProvider de @krizaka/ui/native : chaque composant lit ses rôles de couleur.
Exemples
React Native n’a pas d’aperçu en direct sur le web : chaque exemple montre la capture de sa story, testée dans les deux thèmes, et le code à copier.
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 | Défaut | Description |
|---|---|---|---|
childrenrequis | 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). |
Accessibilité
- 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.
Bonnes pratiques
- Two actions per side at most; the outermost is the one a full swipe runs.
- Destructive actions in
danger, at the far edge.
Composants liés
Générée depuis le code de @krizaka/ui 3.5.0 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub
Swipe deck
Cards decided one by one — drag right to like, left to pass, or the buttons (← → on the web) — with PersonCard: a person's photos, name, age, seal, distance, bio and interests.
Virtual
Long lists and galleries rendered by what is in view, on TanStack Virtual: a list in its own region or the page's, a grid that fits the width, measured items, the end announced for infinite loading.