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.

The primitive

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 transaction row reveals delete on the left and archive on the right, two different directions for two different intents.

Chase Bank transfer

Sent $450.00

Ally Bank deposit

Received $120.00

swipe-row-example.tsx

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

Capabilities

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