SwipeableRow
SwipeableRow reveals actions when swiped and provides an action button for keyboard and touch discovery. Actions use the theme-aware Button primitive. Put the row inside a
GestureHandlerRootView to enable swipe gestures; the action button remains available without Gesture Handler.Source
LLM docs
Package
Examples
1
Properties
35
Playground
Swipe actions
Swipe the message toward either side to reveal actions. The action button also shows all actions, including for keyboard users.
startActions and endActions follow the current text direction. Use color and variant on each action to communicate its purpose.Loading demo…
import { useState } from 'react';
import { Block, Column, SwipeableRow, Text } from '@plocks/ui';
export function Demo() {
const [status, setStatus] = useState('Choose an action');
return (
<Column gap="sm" fullWidth>
<Text c="secondary">Swipe the row, or open its action button.</Text>
<SwipeableRow
w="100%"
accessibilityLabel="Message from Ada"
startActions={[{ key: 'archive', label: 'Archive', icon: 'folder', color: 'primary', onPress: () => setStatus('Archived') }]}
endActions={[{ key: 'delete', label: 'Delete', icon: 'trash', color: 'error', onPress: () => setStatus('Deleted') }]}
>
<Block p="md" fullWidth>
<Text fw="semibold">Ada Lovelace</Text>
<Text c="secondary">New design notes are ready to review.</Text>
</Block>
</SwipeableRow>
<Text>{status}</Text>
</Column>
);
}React Native design for iOS, Android, and Web.
Quick Links
Resources