Swipeable list items in React Native

Introduction

Swipeable list items let users quickly act on list entries by swiping left or right. This makes apps feel smooth and easy to use.

You want users to delete or archive emails by swiping on each email.

You want to reveal buttons like edit or share when swiping a contact in a list.

You want to add quick actions on tasks in a to-do list app.

You want to save space by hiding buttons until the user swipes.

You want to improve app usability with intuitive gestures.

Syntax

React Native

import { Swipeable } from 'react-native-gesture-handler';

function SwipeableItem({ children, renderRightActions }) {
  return (
    <Swipeable renderRightActions={renderRightActions}>
      {children}
    </Swipeable>
  );
}

The Swipeable component wraps the item you want to swipe.

The renderRightActions prop is a function that returns the buttons shown when swiping left.

Examples

If you don't provide renderRightActions, swiping won't show buttons.

React Native

import { Swipeable } from 'react-native-gesture-handler';

// Empty right actions (no buttons)
function SwipeableItemEmpty({ children }) {
  return <Swipeable>{children}</Swipeable>;
}

This example shows a red Delete button when swiping left.

React Native

import { Swipeable, RectButton } from 'react-native-gesture-handler';
import { Text, View } from 'react-native';

function RightActions() {
  return (
    <RectButton style={{backgroundColor: 'red', justifyContent: 'center', flex: 1}}>
      <Text style={{color: 'white', paddingHorizontal: 20}}>Delete</Text>
    </RectButton>
  );
}

function SwipeableItemWithDelete({ children }) {
  return <Swipeable renderRightActions={RightActions}>{children}</Swipeable>;
}

You can show multiple buttons side by side when swiping.

React Native

import { Swipeable, RectButton } from 'react-native-gesture-handler';
import { Text, View } from 'react-native';

function MultipleRightActions() {
  return (
    <View style={{flexDirection: 'row', width: 160}}>
      <RectButton style={{backgroundColor: 'blue', justifyContent: 'center', flex: 1}}>
        <Text style={{color: 'white', paddingHorizontal: 10}}>Edit</Text>
      </RectButton>
      <RectButton style={{backgroundColor: 'red', justifyContent: 'center', flex: 1}}>
        <Text style={{color: 'white', paddingHorizontal: 10}}>Delete</Text>
      </RectButton>
    </View>
  );
}

function SwipeableItemMultiple({ children }) {
  return <Swipeable renderRightActions={MultipleRightActions}>{children}</Swipeable>;
}

Sample App

This app shows a list of items. Swipe left on any item to reveal a red Delete button. Pressing Delete shows an alert with the item name.

React Native

import React from 'react';
import { View, Text, FlatList, StyleSheet, Alert } from 'react-native';
import { Swipeable, RectButton, GestureHandlerRootView } from 'react-native-gesture-handler';

const DATA = [
  { id: '1', title: 'First Item' },
  { id: '2', title: 'Second Item' },
  { id: '3', title: 'Third Item' }
];

function RightActions({ onDelete }) {
  return (
    <RectButton style={styles.rightAction} onPress={onDelete}>
      <Text style={styles.actionText}>Delete</Text>
    </RectButton>
  );
}

export default function App() {
  const renderItem = ({ item }) => {
    const handleDelete = () => {
      Alert.alert('Delete', `Delete ${item.title}?`);
    };

    return (
      <Swipeable renderRightActions={() => <RightActions onDelete={handleDelete} />}>
        <View style={styles.item}>
          <Text style={styles.title}>{item.title}</Text>
        </View>
      </Swipeable>
    );
  };

  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      <FlatList
        data={DATA}
        keyExtractor={item => item.id}
        renderItem={renderItem}
      />
    </GestureHandlerRootView>
  );
}

const styles = StyleSheet.create({
  item: {
    backgroundColor: 'white',
    padding: 20,
    borderBottomColor: '#ccc',
    borderBottomWidth: 1
  },
  title: {
    fontSize: 18
  },
  rightAction: {
    backgroundColor: 'red',
    justifyContent: 'center',
    alignItems: 'flex-end',
    paddingHorizontal: 20,
    flex: 1
  },
  actionText: {
    color: 'white',
    fontWeight: '600'
  }
});

Important Notes

Swipeable actions run in O(1) time since they just show/hide UI elements.

Keep swipe areas large enough for easy tapping on mobile.

Common mistake: forgetting to wrap the app in GestureHandlerRootView causes gestures not to work.

Use swipe actions for quick tasks like delete or archive, but avoid overloading with too many buttons.

Summary

Swipeable list items improve user experience by adding quick gesture actions.

Use Swipeable from react-native-gesture-handler to create swipeable rows.

Provide renderRightActions or renderLeftActions to show buttons when swiping.