Swipeable list items in React Native - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to import the component needed for swipeable list items in React Native.

React Native

import { [1] } from 'react-native-gesture-handler';

Drag options to blanks, or click blank then click option'

AFlatList

BSwipeable

CScrollView

DTouchableOpacity

Attempts:

3 left

💡 Hint

Common Mistakes

Importing FlatList instead of Swipeable

Using ScrollView which doesn't support swipe gestures

Forgetting to import from 'react-native-gesture-handler'

The Swipeable component from react-native-gesture-handler enables swipe gestures on list items.

2fill in blank

medium

Complete the code to render a swipeable list item with a right action button.

React Native

const renderRightActions = () => (
  <View style={{backgroundColor: 'red', justifyContent: 'center', alignItems: 'center', width: 80}}>
    <Text style={{color: 'white'}}>Delete</Text>
  </View>
);

return (
  <[1] renderRightActions={renderRightActions}>
    <View style={{padding: 20, backgroundColor: 'white'}}>
      <Text>Swipe me</Text>
    </View>
  </[1]>
);

Drag options to blanks, or click blank then click option'

ASwipeable

BTouchableOpacity

CFlatList

DScrollView

Attempts:

3 left

💡 Hint

Common Mistakes

Using TouchableOpacity which doesn't support swipe actions

Using FlatList or ScrollView which are list containers, not swipe wrappers

The Swipeable component wraps the list item and accepts renderRightActions to show buttons when swiped.

3fill in blank

hard

Fix the error in the code to close the swipeable item after pressing the delete button.

React Native

const swipeableRef = useRef(null);

const closeSwipe = () => {
  if (swipeableRef.current) {
    swipeableRef.current.[1]();
  }
};

Drag options to blanks, or click blank then click option'

Aclose

Bdismiss

CswipeClose

DcloseSwipe

Attempts:

3 left

💡 Hint

Common Mistakes

Using a non-existent method name like dismiss or swipeClose

Trying to call closeSwipe which is the function itself

The Swipeable component has a close() method to close the swipe actions programmatically.

4fill in blank

hard

Fill both blanks to create a swipeable list item that calls a function when deleted.

React Native

const onDelete = () => {
  console.log('Item deleted');
};

return (
  <Swipeable
    ref={swipeableRef}
    renderRightActions={() => (
      <TouchableOpacity onPress={() => { swipeableRef.current.[1](); [2](); }} style={{backgroundColor: 'red', justifyContent: 'center', alignItems: 'center', width: 80}}>
        <Text style={{color: 'white'}}>Delete</Text>
      </TouchableOpacity>
    )}
  >
    <View style={{padding: 20, backgroundColor: 'white'}}>
      <Text>Swipe me</Text>
    </View>
  </Swipeable>
);

Drag options to blanks, or click blank then click option'

AcloseSwipe

BonDelete

Cclose

DdeleteItem

Attempts:

3 left

💡 Hint

Common Mistakes

Calling onDelete before closing swipe

Using wrong method names like closeSwipe or deleteItem

When pressing delete, first call close() on the swipeable ref to close the swipe, then call onDelete() to handle deletion.

5fill in blank

hard

Fill all three blanks to create a swipeable list with multiple items and delete functionality.

React Native

const [items, setItems] = useState(['Apple', 'Banana', 'Cherry']);
const swipeableRefs = useRef(new Map());

const deleteItem = (index) => {
  swipeableRefs.current.get(index).[1]();
  setItems(items.filter((_, i) => i !== index));
};

return (
  <FlatList
    data={items}
    keyExtractor={(item, index) => index.toString()}
    renderItem={({item, index}) => (
      <Swipeable
        ref={ref => swipeableRefs.current.set(index, ref)}
        renderRightActions={() => (
          <TouchableOpacity onPress={() => deleteItem(index)} style={{backgroundColor: 'red', justifyContent: 'center', alignItems: 'center', width: 80}}>
            <Text style={{color: 'white'}}>[2]</Text>
          </TouchableOpacity>
        )}
      >
        <View style={{padding: 20, backgroundColor: 'white'}}>
          <Text>{ [3] }</Text>
        </View>
      </Swipeable>
    )}
  />
);

Drag options to blanks, or click blank then click option'

Aclose

BDelete

Citem

Dopen

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'open' instead of 'close' to close swipe

Showing wrong button text or item text

Not managing refs correctly for multiple items

To delete an item, first call close() on its swipeable ref, then update the list. The button text is 'Delete' and the displayed text is the item name.