Swipeable list items in React Native - UI Render Trace

Component - Swipeable list items

This component shows a list where each item can be swiped left or right to reveal actions like delete or archive. It helps users quickly manage list items with simple gestures.

Widget Tree

View
├─ FlatList
│  ├─ Swipeable (for each item)
│  │  ├─ View (item content)
│  │  └─ View (hidden actions)
└─ StatusBar

The root View contains a FlatList that renders multiple Swipeable components, one per list item. Each Swipeable wraps the visible item content and hidden action buttons that appear on swipe. A StatusBar is also present for system UI.

Render Trace - 6 Steps

Step 1: View

Step 2: FlatList

Step 3: Swipeable (per item)

Step 4: View (item content)

Step 5: View (hidden actions)

Step 6: StatusBar

State Change - Re-render

Trigger:User swipes a list item left or right

Before

Swipeable item is closed, showing only the item content

→

After

Swipeable item reveals hidden action buttons behind the item content

Re-renders:Only the swiped Swipeable item re-renders to show the action buttons

UI Quiz - 3 Questions

What happens when you swipe a list item to the left?

A The entire list scrolls horizontally

B Hidden action buttons appear on the right side behind the item

C The item content moves off screen and disappears

D Nothing happens

Key Insight

Swipeable list items improve user experience by allowing quick access to common actions with simple gestures. Using FlatList ensures smooth performance even with many items. Keeping re-renders scoped to the swiped item avoids unnecessary updates and keeps the app responsive.