SwipeableItem

SwipeableItem wraps any content to enable horizontal swipe gestures revealing action buttons. Supports left and right actions, full-swipe triggers, collapse-dismiss animation, and haptic feedback.

Usage

import { SwipeableItem } from '@masumdev/rn-ui';
import { Trash2, Archive } from 'lucide-react-native';

export function SwipeableExample() {
  return (
    <SwipeableItem
      leftActions={[
        {
          label: 'Archive',
          icon: (p) => <Archive {...p} />,
          tone: 'primary',
          onPress: () => console.log('Archived'),
        },
      ]}
      rightActions={[
        {
          label: 'Delete',
          icon: (p) => <Trash2 {...p} />,
          tone: 'danger',
          isDestructive: true,
          onPress: () => console.log('Deleted'),
        },
      ]}
    >
      <Item>
        <ItemContent>
          <ItemTitle>Swipe me left or right</ItemTitle>
        </ItemContent>
      </Item>
    </SwipeableItem>
  );
}

Ref Methods

Method	Description
`close()`	Close revealed actions
`openLeft()`	Programmatically reveal left actions
`openRight()`	Programmatically reveal right actions
`dismiss(callback?)`	Collapse-dismiss the row with animation

Props API

Prop	Type	Default	Description
`children`*	`React.ReactNode`	—	Row content to render.
`leftActions`	`SwipeableAction[]`	—	Actions revealed on right swipe.
`rightActions`	`SwipeableAction[]`	—	Actions revealed on left swipe.
`actionWidth`	`number`	`72`	Width of each action button.
`fullSwipeThreshold`	`number`	`0.6`	Threshold (0-1) to trigger full swipe.
`onFullSwipeLeft`	`() => void`	—	Callback on full left swipe.
`onFullSwipeRight`	`() => void`	—	Callback on full right swipe.
`hapticFeedback`	`boolean`	`true`	Enable haptic feedback.
`disabled`	`boolean`	`false`	Disable swipe gestures.

SwipeableAction

Prop	Type	Default	Description
`label`	`string`	—	Action button label.
`icon`	`RenderIcon`	—	Action button icon.
`tone`	`ComponentTone`	—	Color tone for the action.
`backgroundColor`	`string`	—	Custom background color override.
`isDestructive`	`boolean`	—	Mark as destructive (enables full-swipe delete).
`onPress`	`() => void`	—	Action press callback.
`closeOnPress`	`boolean`	`true`	Auto-close after press.