Gesture detection in React Native
Yes, it sounds scary.
No, it isn't.
Johannes Lumpe has scored again with a great Tutorial series on how to achieve the missing React Native's gestures, starting with panning and a great introduction on ES7 decorator syntax.
Gestures are one of the most prevalent things on mobile. Without them our apps wouldn’t be able to function – nobody could navigate anywhere! React Native comes with basic gesture support and allows us to use
TouchableOpacity
and friends to create views which are tappable. But what about other gestures like panning or pinch-zooming? Those we have to implement on our own – but that’s not as bad as it sounds. In fact, implementing the two mentioned gestures is quite straight forward, so that’s what we are going to do! (This post will only show the panning gesture, pinch-zooming will follow in a future post)We will discuss the following topics:
- PanResponder and the gesture responder system
- Finding a way to implement our gestures
- Building the panning decorator
- Using the panning decorator