Swipeable Row

Swipe-to-reveal actions, like Mail's swipe-to-delete, with a haptic tick at the open threshold.

ReanimatedGesture HandlerHapticsSource

Prerequisites

The gesture needs Reanimated and Gesture Handler installed and configured; expo install pins the versions that match your SDK.


npx expo install @hugeicons/react-native expo-haptics react-native-gesture-handler react-native-reanimated

Install


npx @rslab/cli add swipeable-row

Usage

import { SwipeableRow } from '@/components/ui/SwipeableRow';

import { Delete02Icon, Tick02Icon } from '@hugeicons/core-free-icons';

<SwipeableRow
  actions={[
    { label: 'Done', color: '#22c55e', icon: Tick02Icon, onPress: complete },

    { label: 'Delete', color: '#ef4444', icon: Delete02Icon, onPress: remove },
  ]}
>
  <View className="bg-white px-4 py-4 dark:bg-neutral-900">
    <Text>Task title</Text>
  </View>
</SwipeableRow>;

Actions render right-to-left in array order, so the first entry sits closest to the row's edge once it's fully open.

Props

PropTypeDefault

children

ReactNode

-

The row's foreground content, any layout you want.

actions

{ label: string; onPress: () => void; color?: string; icon?: HugeIcon }[]

-

Rendered right-to-left in array order behind the row.

actionWidth?

number

76

Width in px of each action button.

disabled?

boolean

false

Disables the swipe gesture entirely.

haptic?

boolean

true

Set false to mute the open-threshold tick.

className?

string

-

Extend or override the outer wrapper.

How it works

Actions sit behind, the row sits on top. The actions container is absolutely positioned at the row's right edge with a fixed total width (actions.length * actionWidth). The row itself is what translates left via Gesture.Pan(), so dragging it away is what reveals the actions underneath, nothing about the actions animates.
A threshold haptic, not one per frame. A shared value tracks whether the drag has passed 40% of the full reveal; the haptic only fires when that boolean flips, not on every onUpdate tick.
Velocity counts, not just distance. On release, the row opens fully if either the drag passed the distance threshold or the release was a fast flick, even if the finger didn't travel far, matching how iOS's own swipe actions behave.
Horizontal-only gesture claiming. activeOffsetX/failOffsetY mean the pan only activates once the drag is clearly horizontal, so a vertical scroll on a parent list isn't hijacked.
Single-row scope. This component doesn't track which row in a list is open, if you need swiping one row open to close others, that coordination belongs in your list, not here.

Tuning

OPEN_THRESHOLD_RATIO: how far you must drag, as a fraction of the full reveal, before it snaps open instead of closed
the 500 velocity threshold in onEnd, lower it to make a fast flick open the row more easily
actionWidth: widen it if a label needs more room, or drop the icon on an action to fit more actions in the same space

See exactly how this works with an RSLAB subscription.

Get Pro

Swipeable Row

Prerequisites

Install

Usage

Props

On this page