Swipeable list items in React Native - Mini App: Build & Ship

Build: Swipeable List

A screen showing a list of items that can be swiped left to reveal a Delete button.

Target UI

-------------------------
| Item 1               |
|-----------------------|
| Item 2               |
|-----------------------|
| Item 3               |
|-----------------------|
| Item 4               |
-------------------------
(Swipe left on any item to reveal a red Delete button)

Display a vertical list of at least 4 items with text labels.

Each item can be swiped left to reveal a red Delete button on the right side.

Tapping the Delete button removes the item from the list.

The list updates immediately after deletion.

Use React Native's gesture handler or any suitable library for swipe gestures.

Starter Code

React Native

import React, { useState } from 'react';
import { View, Text, FlatList, StyleSheet } from 'react-native';

export default function SwipeableList() {
  const [items, setItems] = useState([
    { id: '1', text: 'Item 1' },
    { id: '2', text: 'Item 2' },
    { id: '3', text: 'Item 3' },
    { id: '4', text: 'Item 4' },
  ]);

  // TODO: Implement swipeable list items with delete button

  return (
    <View style={styles.container}>
      <FlatList
        data={items}
        keyExtractor={item => item.id}
        renderItem={({ item }) => (
          <View style={styles.item}>
            <Text>{item.text}</Text>
          </View>
        )}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, paddingTop: 50 },
  item: { padding: 20, borderBottomWidth: 1, borderColor: '#ccc' },
});

Task 1

Task 2

Task 3

Solution

React Native

import React, { useState } from 'react';
import { View, Text, FlatList, StyleSheet, TouchableOpacity, Animated } from 'react-native';
import { Swipeable } from 'react-native-gesture-handler';

export default function SwipeableList() {
  const [items, setItems] = useState([
    { id: '1', text: 'Item 1' },
    { id: '2', text: 'Item 2' },
    { id: '3', text: 'Item 3' },
    { id: '4', text: 'Item 4' },
  ]);

  const renderRightActions = (progress, dragX, itemId) => {
    const scale = dragX.interpolate({
      inputRange: [-100, 0],
      outputRange: [1, 0],
      extrapolate: 'clamp',
    });

    return (
      <TouchableOpacity
        onPress={() => handleDelete(itemId)}
        style={styles.deleteButton}
        accessibilityLabel="Delete item"
      >
        <Animated.Text style={[styles.deleteText, { transform: [{ scale }] }]}>Delete</Animated.Text>
      </TouchableOpacity>
    );
  };

  const handleDelete = (id) => {
    setItems(currentItems => currentItems.filter(item => item.id !== id));
  };

  const renderItem = ({ item }) => (
    <Swipeable
      renderRightActions={(progress, dragX) => renderRightActions(progress, dragX, item.id)}
      overshootRight={false}
    >
      <View style={styles.item}>
        <Text>{item.text}</Text>
      </View>
    </Swipeable>
  );

  return (
    <View style={styles.container}>
      <FlatList
        data={items}
        keyExtractor={item => item.id}
        renderItem={renderItem}
        accessibilityLabel="Swipeable list of items"
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, paddingTop: 50, backgroundColor: '#fff' },
  item: { padding: 20, borderBottomWidth: 1, borderColor: '#ccc', backgroundColor: '#fff' },
  deleteButton: {
    backgroundColor: 'red',
    justifyContent: 'center',
    alignItems: 'center',
    width: 80,
    height: '100%',
  },
  deleteText: {
    color: 'white',
    fontWeight: 'bold',
  },
});

We used the Swipeable component from react-native-gesture-handler to enable swipe gestures on each list item. When the user swipes left, a red Delete button appears on the right side.

The renderRightActions function creates the Delete button with an animated scale effect for smooth appearance. Pressing the Delete button calls handleDelete, which removes the item from the state array, causing the list to update immediately.

Accessibility labels are added for screen readers. The list uses FlatList for efficient rendering.

Final Result

Completed Screen

-------------------------
| Item 1               |
|-----------------------|
| Item 2               |
|-----------------------|
| Item 3               |
|-----------------------|
| Item 4               |
-------------------------
(Swipe left on any item reveals a red [Delete] button on the right side)

Swipe left on any list item to reveal the red Delete button on the right.

Tap the Delete button to remove that item from the list immediately.

The list updates and shows remaining items.

Stretch Goal

Add an Undo feature that appears as a temporary banner after deleting an item, allowing the user to restore it.

💡 Hint

Use a state to store the last deleted item and a timer to hide the Undo banner after a few seconds.