React Native fires raw touch events on all native elements, very similar to the touch events of mobile browsers.
They support multi-touch by providing a list of
topTouchStart: fired as soon a finger touches the element.
topTouchMove: fired regularly while the finger moves on the element.
topTouchEnd: fired when all fingers leave the screen.
topTouchCancel: fired when the touch gesture is cancelled, e.g. when a scroll is triggered.
In a template, they can be used as follows:
Since the raw touch events are very to the ones of a mobile browser, we can use Hammer.js to recognize gestures. On all elements, all default gestures are supported:
The event object returned is the one documented in the API of Hammer.js
Each gesture recognizer fires all the events associated, e.g.
Swipe recognizer fires
swipeup, etc events.
Tap one is customized to fire additional events:
In a template, it can be used as follows:
<View (tapstart)="_highlight($event)" (tapcancel)="_unhighlight($event) (tap)="_unhighlightAndAction($event)>...</View> <View (swipeleft)="_handleLeft($event)" (swiperight)="_handleRight($event)">...</View>