React Native Swipe Action Slider

A lightweight React Native component that mimics the WhatsApp style swipe-to-reveal actions for list rows. Slide a row horizontally to reveal contextual actions like mute, pin, delete, archive, or custom buttons.

https://user-images.githubusercontent.com/00000000/whatsapp-swipe.gif

Installation

npm install react-native-swipe-action-slider
# or
yarn add react-native-swipe-action-slider

The component has peer dependencies on react and react-native. No additional native modules are required.

Quick Start

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { SwipeActionSlider } from 'react-native-swipe-action-slider';
import { ArchiveIcon, PinIcon, DeleteIcon } from './icons';

const actions = [
  {
    key: 'archive',
    label: 'Archive',
    icon: <ArchiveIcon color="#fff" />,
    backgroundColor: '#0a7cff',
    onPress: () => console.log('Archive'),
  },
  {
    key: 'pin',
    label: 'Pin',
    icon: <PinIcon color="#fff" />,
    backgroundColor: '#3e68ff',
    onPress: () => console.log('Pin'),
  },
  {
    key: 'delete',
    label: 'Delete',
    icon: <DeleteIcon color="#fff" />,
    backgroundColor: '#d93025',
    onPress: () => console.log('Delete'),
  },
];

export const ConversationRow = () => (
  <SwipeActionSlider actions={actions}>
    <View style={styles.row}>
      <Text style={styles.title}>Amna</Text>
      <Text style={styles.preview}>Hey! Can we catch up later today?</Text>
    </View>
  </SwipeActionSlider>
);

const styles = StyleSheet.create({
  row: {
    paddingHorizontal: 16,
    paddingVertical: 14,
    backgroundColor: '#fff',
  },
  title: {
    fontWeight: '600',
    fontSize: 16,
    marginBottom: 4,
  },
  preview: {
    color: '#6b7280',
  },
});

Props

| Prop | Type | Default | Description | | --- | --- | --- | --- | | actions | SwipeAction[] | [] | Array of actions displayed when the row is swiped. | | children | ReactNode | required | Content of the row. | | style | StyleProp<ViewStyle> | undefined | Wrapper style for the slider container. | | actionContainerStyle | StyleProp<ViewStyle> | undefined | Style override for the revealed actions container. | | actionWidth | number | 72 | Width of each action button. | | maxSwipeDistance | number | actionWidth * actions.length | Maximum distance the row can be dragged. Useful when you want uneven button widths. | | overshoot | number | 16 | Extra distance allowed for rubber-band effect at edges. | | openThreshold | number | 0.35 | Fraction of maxSwipeDistance required to open from closed state. | | closeThreshold | number | 0.3 | Fraction of maxSwipeDistance the user must keep covered to remain open. | | direction | 'left' \| 'right' | 'left' | Direction that reveals the actions. 'left' means swipe towards the left (actions appear on the right). | | onSwipeStart | () => void | undefined | Fired when the user starts dragging. | | onSwipeEnd | (isOpen: boolean) => void | undefined | Fired when the slider settles open or closed. | | friction | number | 12 | Spring friction used when animating to the resting position. | | tension | number | 120 | Spring tension used when animating to the resting position. |

export type SwipeAction = {
  key: string;
  label?: string;
  icon?: React.ReactNode;
  onPress: () => void;
  backgroundColor?: string;
  textStyle?: StyleProp<TextStyle>;
  testID?: string;
};

Tips

• Wrap list rows with the slider inside FlatList / SectionList render items.
• Keep actionWidth values consistent for a polished feel.
• Use vector icons for the best performance and clarity on high DPI screens.
• Call onSwipeEnd to close other rows when one opens.

Roadmap

• Left-to-right swipe demos
• RTL support & layout testing
• Expanded accessibility: voiceover labels & hints

Contributions and feedback are welcome!