PagerView blocks cross-axis orientation gestures.

[ItsMeJules]

Environment

react-native: 0.76.5
react-native-pager-view: 6.6.1
react-native-gesture-handler: 2.20.2
expo: 52.0.19

Description

<PagerView /> component blocks cross orientation gestures. I tried wrapping it with a <GestureDetector /> that takes a Gesture.Pan() but it wouldn't let vertical movements trigger even though it is on orientation horizontal.

I tried following what's in this issue software-mansion/react-native-gesture-handler#3268, I managed to catch the gesture, but only after a first horizontal pan.

Screen.Recording.2025-01-08.at.00.52.38.mov

Reproducible Demo

export default function CategoryIndex() {
  const native = Gesture.Native();
  const panGesture = Gesture.Pan()
    .blocksExternalGesture(native)
    .onUpdate((event) => {
      const { translationY, translationX } = event;

      console.log('translation:', translationX, translationY);
    });

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <GestureDetector gesture={panGesture}>
        <View style={{ flex: 1, backgroundColor: 'green' }}>
          <GestureDetector gesture={native}>
            <PagerView style={{ flex: 1 }} initialPage={0}>
              <View>
                <Text key="1">Test</Text>
              </View>
              <View>
                <Text key="2">Test 2</Text>
              </View>
            </PagerView>
          </GestureDetector>
        </View>
      </GestureDetector>
    </SafeAreaView>
  );
}

[FlashGameDev]

I'm also running into this. No matter what I do I can't get PagerView to stop consuming vertical scroll events, so having a PagerView inside of a ScrollView completely breaks the vertical scrolling of the ScrollView. Even if I completely disable scrolling on my PagerView scrollEnabled={false} it STILL eats the touch gestures.

I've tried several different methods and the only thing I've gotten even close to working is to write my own logic with the parent view of the PagerView

<View onTouchStart={handleTouchStart} onTouchMove={handleTouchMove}>

Then I basically have to completely rewrite all of the logic of vertical scrolling which is a nightmare because my ScrollView also uses a refresh at the top and bottom of the scroll, plus I have to rewrite inertia logic and everything else. Basically a manual full rewrite of ScrollViews scrolling logic.

From what I can see looking through the issues on here this has been an issue for over 2 years. I tried reverting to an older verison of pager view but I can't get it to compile with react native 0.76.

This seems like a common use case to have a PagerView inside of a scrollable list of some kind, why has this issue not been fixed for years? I was using the old react native community view pager on react native 0.72 and it worked just fine but since I upgraded to 0.76 I was forced to upgrade to react native pager view and now I can't get basic functionality to work.

Does anyone have a solution to this problem?

[ItsMeJules]

same for me, even when disabling scrolling, it still consumes the pan event.

[djung-karmak]

We had a horizontal <TabView> inside a vertical <ScrollView> that blocked swiping/scrolling.
The change in this PR/a patch similar to this #734 (comment) worked for us: the vertical scrolling and horizontal tab swiping both work.
(We only applied it to RNCPagerView not RNCPagerViewComponentView, but it might be worth trying patching that as well).

diff --git a/node_modules/react-native-pager-view/ios/RNCPagerView.m b/node_modules/react-native-pager-view/ios/RNCPagerView.m
index 507b45d..830d025 100644
--- a/node_modules/react-native-pager-view/ios/RNCPagerView.m
+++ b/node_modules/react-native-pager-view/ios/RNCPagerView.m
@@ -492,6 +492,11 @@ - (BOOL)gestureRecognizer:(UIGestureRecognizer *)gestureRecognizer shouldRecogni
         return YES;
     }
 
+    // Allow nested scroll views to scroll simultaneously with the pager
+    if ([otherGestureRecognizer.view isKindOfClass: UIScrollView.class]) {
+        return YES;
+    }
+
     self.scrollView.panGestureRecognizer.enabled = self.scrollEnabled;
     return NO;
 }

Versions:
react-native: 0.76.5
react-native-pager-view: 6.6.1
react-native-tab-view: 4.0.5