Swipeable list items in React Native - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

Swipeable list item behavior

What happens when you swipe a list item to the left using a typical swipeable list component in React Native?

A The item reveals hidden action buttons like Delete or Archive behind it.

B The item immediately deletes itself without confirmation.

C The entire list scrolls horizontally instead of vertically.

D Nothing happens; swipe gestures are ignored by default.

💡 Hint

Think about common email apps where you swipe left on a message.

Swiping left on a list item usually reveals hidden buttons such as Delete or Archive, allowing the user to take quick actions.

❓ lifecycle

intermediate

State update after swipe action

After a user swipes a list item and taps the Delete button, what is the best way to update the list in React Native?

A Directly modify the list array without updating state; React Native will detect changes automatically.

B Reload the entire app to refresh the list.

C Remove the item from the state array and call setState or useState setter to update the list.

D Use a timeout to delay the removal of the item from the list.

💡 Hint

React Native UI updates when state changes.

To update the UI after deleting an item, you must update the state holding the list data. Direct mutation without state update won't re-render the list.

📝 Syntax

advanced

Correct usage of Swipeable component

Which code snippet correctly implements a swipeable list item using the 'react-native-gesture-handler' Swipeable component?

React Native

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

function ListItem({ item, onDelete }) {
  const renderRightActions = () => (
    <Button title="Delete" onPress={() => onDelete(item.id)} />
  );

  return (
    <Swipeable renderRightActions={renderRightActions}>
      <View><Text>{item.text}</Text></View>
    </Swipeable>
  );
}

A Swipeable component wraps the item view and uses renderRightActions prop to show buttons on swipe.

B Swipeable component must be inside the item view, not wrapping it.

C Swipeable component requires a renderLeftActions prop only; renderRightActions is invalid.

D Swipeable component does not support buttons; use TouchableOpacity instead.

💡 Hint

Check the official docs for Swipeable usage.

The Swipeable component wraps the list item and uses renderRightActions to display buttons when swiped left.

🔧 Debug

advanced

Swipeable item not responding to gestures

You implemented Swipeable list items, but swiping does nothing. What is the most likely cause?

A You need to import Swipeable from 'react-native' instead of 'react-native-gesture-handler'.

B You used TouchableOpacity inside Swipeable, which disables gestures.

C You did not set a fixed height on the list items.

D You forgot to wrap your app with GestureHandlerRootView from 'react-native-gesture-handler'.

💡 Hint

Gesture handler library requires a special root wrapper.

GestureHandlerRootView is required at the root of your app to enable gesture handling for Swipeable components.

🧠 Conceptual

expert

Managing multiple swipeable items open

In a list with many swipeable items, what is the best approach to ensure only one item is open (swiped) at a time?

A Use a global state to track all open items and close them after a timeout.

B Keep a ref to the currently open Swipeable and close it programmatically before opening another.

C Disable swipe gestures on all items except the first one.

D Allow multiple items to stay open; users can close them manually.

💡 Hint

Think about how to control one open item at a time.

Keeping a ref to the open Swipeable and closing it before opening another ensures only one item is open, improving UX and preventing overlap.