What are gestures?
Mobile is a touch medium, and gestures — swipe to delete, drag to reorder, pinch to zoom, pull to refresh — are how users expect to interact. The Gesture Handler library recognizes these touch patterns on the native thread and pairs with Reanimated to drive smooth, gesture-linked motion.
Why it matters
Rich gestures make an app feel native and responsive. They are also where touch handling gets tricky: competing gestures, the difference between a tap and a drag, and keeping motion at 60fps. Handling them well is a mark of a polished, professional app.
What to learn
- The Gesture Handler library versus basic touch
- Pan, tap, pinch, and long-press gestures
- Composing and prioritizing simultaneous gestures
- Linking gestures to Reanimated values
- Swipe-to-delete and drag-to-reorder patterns
- Gesture state and cancellation
- Accessibility for gesture-driven actions
Common pitfall
Building gestures so that an action only works by swiping, with no alternative. Users who do not discover the gesture — or who rely on assistive tech — get stuck. Gestures should enhance, not be the only way to do something; always offer a visible button or menu for any gesture-only action.
Resources
Primary (free):
- Gesture Handler — Documentation · docs
- Reanimated — Gestures · docs
- React Native — Gesture responder system · docs
Practice
Build a swipe-to-delete row: a pan gesture reveals a delete action, linked to a Reanimated value for smooth motion, with a spring back if not committed. Add a visible delete button as an alternative. Done when the gesture is smooth and the action is also reachable without it.
Outcomes
- Recognize pan, tap, pinch, and long-press gestures.
- Compose and prioritize simultaneous gestures.
- Link gestures to Reanimated for smooth motion.
- Provide non-gesture alternatives for accessibility.