react-native-gesture-handler
react-native-gesture-handler copied to clipboard
software-mansion
Gesture callback differences between platforms
Description
For certain gestures, the callbacks that are called, or the order in which they are called, differs between platforms. I listed the difference I've found below. The tables show the order of events from top to bottom.
Tap gesture (if pressed quickly):
| iOS | Android |
|---|---|
| onTouchesDown | onBegin |
| onBegin | onTouchesDown |
| onTouchesUp | onTouchesUp |
| onStart | onStart |
| onEnd | onEnd |
| onFinalize | onFinalize |
Tap gesture (if pressed and held):
| iOS | Android |
|---|---|
| onTouchesDown | onBegin |
| onBegin | onTouchesDown |
| onTouchesCancelled | onTouchesCancelled |
| onFinalize | onFinalize |
| onFinalize (a second time) |
LongPress gesture (if pressed quickly):
| iOS | Android |
|---|---|
| onTouchesDown | onBegin |
| onBegin | onTouchesDown |
| onTouchesUp | onTouchesUp |
| onFinalize | onFinalize |
LongPress gesture (if pressed and held):
| iOS | Android |
|---|---|
| onTouchesDown | onBegin |
| onBegin | onTouchesDown |
| onStart | onStart |
| onTouchesUp | onTouchesUp |
| onEnd | onEnd |
| onFinalize | onFinalize |
Fling gesture (when a fling is detected):
| iOS | Android |
|---|---|
| onBegin | onBegin |
| onTouchesDown | onTouchesDown |
| onTouchesMove (possibly multiple) | onTouchesMove (possibly multiple) |
| onStart | onStart |
| onEnd | onTouchesCancelled |
| onFinalize | onEnd |
| onTouchesCancelled | onFinalize |
Pinch gesture, Rotation gesture, and Native gesture (when pressed):
| iOS | Android |
|---|---|
| onBegin | |
| onTouchesDown | onTouchesDown |
| onTouchesUp | onTouchesUp |
| onFinalize |
Manual gesture (when pressed). In the provided Snack, this only happens on the first press because the gesture is never finalized:
| iOS | Android |
|---|---|
| onTouchesDown | onBegin |
| onBegin | onTouchesDown |
| onTouchesUp | onTouchesUp |
Steps to reproduce
- Open the provided Snack in two different windows and load one with iOS and one with Android.
- Click the gesture buttons on the left and view the log of the callbacks that were called on the right to observe the differences.
- You can clear the log by clicking the "Clear Log" button.
Snack or a link to a repository
https://snack.expo.dev/@elliotwaite/rngh-event-order-test
Gesture Handler version
2.5.0
React Native version
0.69.0
Platforms
Android, iOS
JavaScript runtime
No response
Workflow
No response
Architecture
No response
Build type
No response
Device
No response
Device model
No response
Acknowledgements
Yes
