Swipeable list items in React Native - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a swipeable list item in mobile apps?

A swipeable list item is a list entry that responds to a horizontal swipe gesture, revealing actions like delete or archive, making interaction faster and intuitive.

beginner

Which React Native component helps create swipeable list items?

The Swipeable component from react-native-gesture-handler allows you to add swipe gestures to list items.

intermediate

Why should you use react-native-gesture-handler for swipe gestures instead of basic touch events?

It provides better gesture recognition, smoother animations, and handles gesture conflicts well, improving user experience.

intermediate

How do you add a delete action on swipe left in a swipeable list item?

You define a function that returns a view with a delete button and pass it to the renderRightActions prop of the Swipeable component.

advanced

What accessibility considerations should you keep in mind for swipeable list items?

Ensure swipe actions are also accessible via buttons or other controls, provide clear labels, and support keyboard navigation for users who cannot swipe.

Which prop of the Swipeable component defines the view shown when swiping left?

A renderRightActions

B renderLeftActions

C onSwipeRight

D rightSwipeView

The renderRightActions prop specifies the UI shown when the user swipes the item to the left, revealing actions on the right side.

What library do you need to install to use the Swipeable component in React Native?

A react-native-animatable

B react-native-swipe-list-view

C react-native-gesture-handler

D react-native-swipeable

The Swipeable component is part of the react-native-gesture-handler library.

What is a common use case for swipeable list items?

A To scroll vertically through a list

B To reveal quick actions like delete or archive

C To zoom into images

D To open a modal window

Swipeable list items let users quickly access actions like delete or archive by swiping horizontally.

Which gesture direction usually reveals the delete action in a swipeable list item?

A Swipe left

B Swipe right

C Swipe up

D Swipe down

Swiping left on a list item typically reveals actions like delete on the right side.

How can you improve accessibility for swipeable list items?

A Disable swipe gestures

B Hide actions from screen readers

C Use only color to indicate actions

D Add buttons for actions and provide ARIA labels

Providing buttons and ARIA labels ensures users who cannot swipe can still access actions.

Explain how to implement a swipeable list item in React Native using react-native-gesture-handler.

Think about how to show buttons when the user swipes.

Describe accessibility best practices for swipeable list items in mobile apps.

Consider users who cannot perform swipe gestures.