(Web) Pan Gesture blocks parent ScrollView gestures

[dslounge]

Description

Hi folks!

I'm encountering an issue with setting up pan gestures in a ScrollView using React Native Gesture Handler on web. I’ve created a minimal reproduction of the issue here: https://github.com/dslounge/scrollview-gesture-repro

The app features a ScrollView from react-native-gesture-handler with child components that include various content and custom SwipeableItem components. These items use a GestureDetector and a custom Gesture.Pan() to enable horizontal swipe gestures.

The challenge lies in making these components work together seamlessly:

• The SwipeableItems should handle horizontal pan gestures without blocking the ScrollView from scrolling vertically.
• However, the current setup causes Gesture.Pan() to capture all gesture events, preventing vertical scrolling.

I expected the combination of failOffsetY and simultaneousWithExternalGesture to allow both interactions to work as intended, but it hasn’t resolved the issue.

Documentation Concerns

I found the documentation to be a bit confusing regarding this setup:

• There’s no mention of using ScrollView with gestures in this context.
• The documentation references a waitFor method for managing gesture interactions, but this method doesn’t seem to be available with Gesture.Pan().

I've invested hours into figuring out how to get this to work, and in my searches through github issues I found this issue: https://github.com/software-mansion/react-native-gesture-handler/issues/2616. I agree with the assessment "It's hard to understand how to compose gestures with ScrollView"

Steps to Reproduce

Expected Behavior

• The SwipeableItems should handle horizontal swipes.
• The ScrollView should still scroll vertically without interruption.

Actual Behavior

• The Gesture.Pan() captures all gesture events, preventing vertical scrolling.

https://github.com/user-attachments/assets/fb7f8277-c184-4a69-8ae9-e1b842bd849b

Steps to reproduce

1. Create a new Expo project
2. Use a ScrollView from react-native-gesture-handler.
3. Add child components that include horizontal pan gestures (Gesture.Pan()).
4. Launch on web
5. Attempt to swipe an item left or right while retaining smooth vertical scrolling in the ScrollView.

Snack or a link to a repository

https://github.com/dslounge/scrollview-gesture-repro

Gesture Handler version

~2.20.2

React Native version

0.76.3

Platforms

Web

JavaScript runtime

V8

Workflow

Expo managed workflow

Architecture

Fabric (New Architecture)

Build type

Debug mode

Device

None

Device model

Chrome 131.0.6778.86

Acknowledgements

Yes

[m-bert]

Hi! Let me know if adding pan-y touch action works:

<GestureDetector ... touchAction="pan-y">

This is exactly what we did in our Swipeable components and as far as I know they work as expected.