Component

Swipe row

A list row that reveals leading and trailing action buttons on drag, snapping open past a velocity or distance threshold and closing on tap.

Standalone

Grocery refund

$24.50

swipe row.tsx

<NativeSwipeRow trailingActions={[{ label: "Delete", icon: <Trash />, onPress: onDelete }]}>
  <NativeRow label="Grocery refund" sublabel="$24.50" />
</NativeSwipeRow>

Example

Swiping a list row reveals delete on the left and archive on the right, two different directions for two different intents.

Chase Bank

Updated yesterday

Ally Bank

Updated last week

swipe-row-example.tsx

<NativeSwipeRow
  leadingActions={[{ label: "Delete", icon: <Trash />, onPress: onDelete, color: "#FF3B30" }]}
  trailingActions={[{ label: "Archive", icon: <Archive />, onPress: onArchive }]}
>
  <NativeRow label={item.label} sublabel={item.sublabel} />
</NativeSwipeRow>

Capabilities

Prop	Type	Description
leadingActions	NativeSwipeAction[]	Leading (left) actions, revealed by swiping right
trailingActions	NativeSwipeAction[]	Trailing (right) actions, revealed by swiping left
childrenrequired	React.ReactNode	-
className	string	-