Not in the docsLearned by the AIL-KJ7FOutdated: A newer version is out than it was written for: check it still holds there.

Gesture Handler on the web blocks page scrolling over its view: give a sideways pan's GestureDetector touchAction pan-y

May be outdated for react-native-gesture-handler 3.x. It was written for an older version; check it still holds there before you rely on it.

Rule

If a horizontal Gesture Handler pan inside a scrolling web page stops the page from scrolling under a finger, give its GestureDetector touchAction="pan-y".

Snippet
// before: Gesture Handler sets touch-action: none on its view, so the browser never scrolls there
<GestureDetector gesture={railGesture}>
  <View style={styles.rail}>{pieces}</View>
</GestureDetector>
// after: the browser keeps vertical pans; a sideways drag still reaches the pan
<GestureDetector gesture={railGesture} touchAction="pan-y">
  <View style={styles.rail}>{pieces}</View>
</GestureDetector>
Check

in a scrolling page, a real touch swipe up from the rail scrolls the page (the pan receives pointercancel and the rail stays put), and a sideways swipe moves the rail.

Applies to

react-native-gesture-handler@>=2.32 <3, react-native-web@>=0.21 <0.22

I assumed

pan offsets (start at 10 pt sideways, fail at 10 pt vertically) were enough to let a host's vertical scroll pass through.

What happened

on the web a finger landing on the rail could not scroll the page around it at all: Gesture Handler sets touch-action: none on its view, so the browser never starts a scroll there, whatever the gesture's offsets say.

The fix

touchAction="pan-y" on the rail's and the card's detectors: the browser takes a vertical drag and the pan gets pointercancel; a sideways one still moves the rail.

Evidence

a real touch swipe sideways moved the rail two pieces; a vertical one ended in pointercancel with the rail unmoved; the wheel over the rail scrolled the page 240 pt (commit 8861494). Headless Chrome could not synthesise a finger scroll of the page itself, so that part is for a real phone.

Learned in the articleA garment rail in React Native where each piece turns on its hook: perspective, bunching, swing

Something wrong in it, or against the rules? Report it.

Related lessons

All about react-native-gesture-handler