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.

Practice

1. What is the main purpose of using Swipeable in React Native list items?

easy

A. To allow users to swipe list items and reveal hidden actions

B. To automatically sort list items alphabetically

C. To add animations when list items are tapped

D. To disable scrolling on the list

Solution

1. Step 1: Understand Swipeable component role

   The Swipeable component enables swipe gestures on list items.

2. Step 2: Identify the effect of swiping

   Swiping reveals hidden buttons or actions like delete or edit.

3. Final Answer:

   To allow users to swipe list items and reveal hidden actions -> Option A

4. Quick Check:

   Swipeable = Reveal actions on swipe [OK]

Hint: Swipeable shows hidden buttons when you swipe list items [OK]

Common Mistakes:

• Thinking Swipeable sorts items automatically
• Confusing swipe with tap animations
• Assuming Swipeable disables scrolling

2. Which prop is used to define the buttons shown when swiping a list item to the right in Swipeable?

easy

A. renderLeftActions

B. renderRightActions

C. onSwipeRight

D. swipeButtons

Solution

1. Step 1: Recall Swipeable props for swipe actions

   renderLeftActions defines buttons shown when swiping to the right (revealing left side).

2. Step 2: Match prop to swipe direction

   Swiping to the right reveals buttons from the left side, so renderLeftActions is correct.

3. Final Answer:

   renderLeftActions -> Option A

4. Quick Check:

   Right swipe buttons = renderLeftActions [OK]

Hint: Use renderLeftActions for buttons on right swipe [OK]

Common Mistakes:

• Confusing renderRightActions with right swipe
• Using non-existent prop onSwipeRight
• Assuming swipeButtons is a valid prop

3. Given this code snippet, what will happen when the user swipes the list item to the left?

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

function ListItem() {
  return (
     }
    >
      Message
    
  );
}

medium

A. The 'Archive' button appears when swiping left to right

B. No button appears on swipe

C. The 'Archive' button appears when swiping right to left

D. The list item deletes immediately on swipe

Solution

1. Step 1: Understand renderLeftActions behavior

   renderLeftActions shows buttons when swiping to the right (revealing left side).

2. Step 2: Analyze swipe to the left

   Swiping to the left reveals right side actions via renderRightActions, which is not provided, so no button appears.

3. Final Answer:

   No button appears on swipe -> Option B

4. Quick Check:

   Swipe left requires renderRightActions [OK]

Hint: Swipe left reveals right actions (renderRightActions) [OK]

Common Mistakes:

• Thinking renderLeftActions shows on swipe left
• Confusing the swipe direction for left actions
• Expecting immediate deletion on swipe

4. What is wrong with this code snippet that tries to add swipe actions?

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

function Item() {
  return (
     Delete}
    >
      Item
    
  );
}

medium

A. Swipeable must wrap a View, not Text

B. renderRightActions should be a boolean, not a function

C. Missing onSwipe callback prop

D. Text component cannot be used directly as a swipe action button

Solution

1. Step 1: Check renderRightActions return type

   Swipe actions should be interactive buttons or touchable components, not plain Text.

2. Step 2: Identify correct component usage

   Using Text alone won't respond to touches; use TouchableOpacity or Button.

3. Final Answer:

   Text component cannot be used directly as a swipe action button -> Option D

4. Quick Check:

   Swipe actions need touchable components [OK]

Hint: Swipe actions must be touchable, not plain Text [OK]

Common Mistakes:

• Using plain Text instead of touchable components
• Thinking renderRightActions is a boolean
• Assuming Swipeable can't wrap Text

5. You want to create a swipeable list where swiping left reveals a 'Delete' button and swiping right reveals an 'Archive' button. Which code snippet correctly implements this behavior?

hard

A. Delete}
renderRightActions={() => Archive}
>
Item

B. }
renderRightActions={() => }
>
Item

C. }
renderRightActions={() => }
>
Item

D. }
rightActions={() => }
>
Item

Solution

1. Step 1: Match swipe directions to actions

   Swiping left means moving finger leftwards, revealing right side actions, so 'Delete' should be on right.

2. Step 2: Assign correct props

   renderRightActions shows buttons on right side (swipe left), renderLeftActions shows buttons on left side (swipe right).

3. Step 3: Check button components

   Buttons are used correctly, not plain Text.

4. Final Answer:

   renderLeftActions shows 'Archive', renderRightActions shows 'Delete' -> Option C

5. Quick Check:

   Left swipe = right actions, right swipe = left actions [OK]

Hint: Left swipe reveals right actions; right swipe reveals left actions [OK]

Common Mistakes:

• Swapping left and right actions
• Using plain Text instead of buttons
• Using wrong prop names like leftActions