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.

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