GestureDetector blocking ScrollView in Mobile Web (even if explicitly disabled)

[mikehobi]

Description

I'm trying to create a scrolling feed with a draggable/swipable elements.

When I include GestureDetector inside a ScrollView, scrolling is disabled altogether. I'm trying to implement a solution that allows vertical scrolling and horizontal swiping (on the draggable elements)

The solutions appear to work for iOS/Android, but not for mobile web.

I've provided a simple repro'd snack demo.

Steps to reproduce

1. Implement GestureRoot, ScrollView, and Gesture components
2. Add Gesture.Pan, set to enabled(false) or manualActivation
3. See that scrolling is blocked on Safari (or when emulating mobile device in Chrome Devtools)

Snack or a link to a repository

https://snack.expo.dev/@mikehobi/awkward-red-cereal?platform=web

Gesture Handler version

2.16.1

React Native version

0.74.3

Platforms

Web

JavaScript runtime

None

Workflow

Expo bare workflow

Architecture

None

Build type

None

Device

Real device

Device model

iPhone Latest

Acknowledgements

Yes

[m-bert]

Hi @mikehobi! This issue seems closely related to #2617. You can try to add touchAction property to GestureDetector and set it to pan-y. This is already done internally in our Swipeable implementation. Let me know if it helps!

[mikehobi]

Thanks, touch-action does indeed solve my issue.

I guess I am still curious why .enabled(false) still captures events though, seems as though if it's disabled completely, it should not block other events.

Closing!

[m-bert]

I guess I am still curious why .enabled(false) still captures events though, seems as though if it's disabled completely, it should not block other events.

When handler is created, it sets touch-action: none; on underlying view by default. Currently there's no logic that checks if handler is enabled or not, so changing this property won't change touch-action.

Do you think it should be added?