Support multi-touch behaviour with panning and scrolling #2622
Labels
Feature request
Platform: Android
This issue is specific to Android
Platform: iOS
This issue is specific to iOS
Repro provided
A reproduction with a snack or repo is provided
Description
I’m trying to implement something similar to the gesture behaviour on the default list view on iOS. Eg. the “Reminders” app inside iOS.
It consist of a scrollable view with some list item's inside. When you long-press a list item, it lets you rearrange where the item belong. At the surface, this implementation seems quite simple - a ScrollView wrapping around multiple ListItem component's that is using the
Gesture.Pan().activateAfterLongPress(250)
.The code could look something like this
The problem arise when the scrollable list is expanding beyond the device height dimensions. Because if you would like to drag a ListItem to the bottom of the list, then you need to be able to support scrolling while panning (dragging the item around). To support this, iOS implement 2 different scroll behaviors.
I think that bullet 1. is possible by keeping track of the fingers absolute position on the screen, and activate scroll imperatively, when the primary finger is entering hot areas in the top or bottom of the screen.
But bullet 2. doesn't seem to be possible by the primitive provider by RNGH currently.
By default, ScrollView's seems to be dismissed when a pan-gesture is active. The
simultaneousHandlers
prop allow the ScrollView gesture, andGesture.Pan
, to be active simultaneously - but this let the primary finger, pan and scroll at the same time.What seems to be the crux of the problem, is that when a
Gesture.Pan
is active, RNGH is disabling ScrollView gestures globally, and not locally to the current gesture in action. If theGesture.Pan
instead recognized and ignored the scrollview events, for the local pan-gesture in action, it would allow the secondary finger to scroll. What seems to be missing is a way to distingquish between disabling and ignoring ScrollView events for a given gesture.The multi-touch behavior combining pan with the primary finger, and scrolling with secondary finger, is used multiple places inside iOS. E.g when.
I noticed that
Gesture.Native
is able to wrap and listen to events on the ScrollView, but I'm unable to figure out how this can be composed with behavior im describing above.Steps to reproduce
The code could look something like this
Snack or a link to a repository
https://snack.expo.dev/@matis/99d863
Gesture Handler version
2.12.0
React Native version
0.72.4
Platforms
Android, iOS
JavaScript runtime
None
Workflow
None
Architecture
None
Build type
None
Device
None
Device model
No response
Acknowledgements
Yes
The text was updated successfully, but these errors were encountered: