Swipe Gestures
Swipe Gestures
Swipe gestures are a common mobile interaction pattern, such as swipe-to-delete list items or swipeable cards, that add intuitive, native-feeling interactivity to React Native applications.
Using react-native-gesture-handler’s Swipeable
javascript
import { Swipeable } from 'react-native-gesture-handler';
function SwipeableRow({ item, onDelete }) {
return (
(
onDelete(item.id)} style={styles.deleteButton}>
Delete
)}
>
{item.name}
);
}
Building Custom Swipe Gestures with Reanimated
javascript
const pan = Gesture.Pan().onUpdate((event) => {
translateX.value = event.translationX;
}).onEnd(() => {
if (translateX.value < -100) {
translateX.value = withTiming(-300);
runOnJS(onDelete)(item.id);
} else {
translateX.value = withSpring(0);
}
});
Combining Swipeable with FlatList
javascript
Adding Confirmation Before Deletion
For destructive swipe actions, consider showing a brief confirmation state or undo option rather than immediately and permanently deleting the item.
Common Use Cases
- Swipe-to-delete in email or messaging apps
- Swipeable cards for Tinder-style interfaces
- Revealing quick action buttons on list items
Conclusion
Implementing swipe gestures using Swipeable or custom Gesture Handler and Reanimated combinations adds intuitive, native-feeling interactivity to React Native list items and cards.
