6.2.0 breaks vertical scrolling of ScrollView parent

[jwh-hutchison]

trafficstars

Environment

"react-native": "0.71.6", "react-native-pager-view": "6.2.0", "react-native-tab-view": "^3.5.1",

Description

I was trying to render TabView of react-native-tab-view inside of a ScrollView, but after upgrading to v6.2.0 for pager-view, the vertical scrolling of the scroll view would lock and only adjust if I didn't select the element that was being rendered as a child under the render() function of the PagerViewAdapter; so if I tried scrolling when selecting a TabBar it would scroll correctly - if I switched out the render(<SceneView/>) for a generic View I could scroll fine.

Inside react-native-tab-view/src/TabView:

return (
  <React.Fragment>
    {tabBarPosition === 'top' &&
      renderTabBar({
        ...sceneRendererProps,
        navigationState,
      })}
    {render(
      navigationState.routes.map((route, i) => {
        return (
          <SceneView
            {...sceneRendererProps}
            addEnterListener={addEnterListener}
            key={route.key}
            index={i}
            lazy={typeof lazy === 'function' ? lazy({ route }) : lazy}
            lazyPreloadDistance={lazyPreloadDistance}
            navigationState={navigationState}
            style={sceneContainerStyle}
          >
            {({ loading }) =>
              loading
                ? renderLazyPlaceholder({ route })
                : renderScene({
                    ...sceneRendererProps,
                    route,
                  })
            }
          </SceneView>
        );
      })
    )}
    {tabBarPosition === 'bottom' &&
      renderTabBar({
        ...sceneRendererProps,
        navigationState,
      })}
  </React.Fragment>
);

This PagerView adapter inherits PagerViewProps props from react-native-pager-view and after downgrading the library (to "react-native-pager-view": "6.1.4"), the entire page can scroll fine again, I was originally going to pin the bug on react-native-tab-view but it seems that this issue has happened with other components that depend on the library (see: https://github.com/callstack/react-native-pager-view/issues/713)

Reproducible Demo

When you use the following code and try to scroll vertically on any elements rendered inside of _renderTab nothing will happen. If you downgrade react-native-pager-view to 6.1.4 it will work.

import React, {Component} from 'react';
import {TabBar, TabView} from 'react-native-tab-view';

_renderTab = (tab) => {
  return (
    <View>{...some stuff to render}</View>
  )
}

_renderTabBar = (props) => {
  return (
    <TabBar
      {...props}
      renderLabel={({route}) => (
        <View>
          <Text style={styles.textStyles}>{route.title}</Text>
        </View>
      )}
    />
  );
};

_renderScene = ({route, jumpTo}) => {
    switch (route.key) {
      case 'day':
        return this._renderTab("day");
      case 'week':
        return this._renderTab("week");
      case 'month':
        return this._renderTab("month");
    }
};

render() {
  return (
    <ScrollView
      contentContainerStyle={{flexGrow: 1}}
      nestedScrollEnabled={true}
      scrollEnabled={true}>
      <View>
        <TabView
          navigationState={this.state}
          onIndexChange={(index) => {
            this.setState({index});
          }}
          renderScene={this._renderScene}
          renderTabBar={this._renderTabBar}
        />
      </View>
    </ScrollView>
  )
}

[FadiAboMsalam]

@jwh-hutchison I am facing same issue bro, same issue any update on this 🤔

[jwh-hutchison]

@jwh-hutchison I am facing same issue bro, same issue any update on this 🤔

I would recommend just reverting to version 6.1.4 for now, it definitely seems to be something to do with the way that the PanResponders code was changed in the last release https://github.com/callstack/react-native-pager-view/pull/705/files

[cneilwarner]

We ran into the same thing (6.2.0 breaking vertical scroll on iOS) and had to roll back.

[intergalacticspacehighway]

Sorry, that's on me. Can you try these changes and let me know if it fixes the issue?

https://github.com/callstack/react-native-pager-view/pull/734

[efstathiosntonas]

@intergalacticspacehighway i've patched it with your PR and it didn't work for this issue: https://github.com/callstack/react-native-pager-view/issues/713

after installing [email protected] it worked though 🤷‍♂️

[matt-oakes]

Just to note that #734 works perfectly for me when patched in. You need to remember to rebuild the app through before testing it as it changes native code.

[jatin-bhuva]

Is there any solution? facing the same issue in 6.1.4 and also in the latest version.

[jayharr-is]

I'm also on 6.2.3, and I also get this issue immediately with a fresh expo app and:

<ScrollView>
   <PagerView>
    {...}
  </PagerView>
</ScrollView>

The PagerView scrolls horizontally, and the ScrollView scrolls vertically, but it's impossible to scroll the ScrollView vertically when swiping inside the PagerView.

[jorgezerpa]

I am facing the same issue, but I noticed that, when you scroll from up, and before the scroll stops you swiper again over the PagerView, then it scrolls vertically, but rather not horizontally.

[leabaertschi]

I am also facing this issue with version 6.3.0

[shubhamguptadream11]

Facing the same issue. Fixed with [email protected]. When are we planning to release v7.x.x version? @intergalacticspacehighway

[wilsolutions]

Thanks @shubhamguptadream11

In case anyone ran into this issue, I've recently upgraded my App to RN 0.73.8 and got this error well but it was fixed bumping the RNPV to [email protected]

[leabaertschi]

[email protected] fixes this issue, but now it seems to be impossible to have elements in a page with an onPress, this is never called when clicking on a Pressable in a page

[onyedikachi23]

@intergalacticspacehighway i've patched it with your PR and it didn't work for this issue: #713

after installing [email protected] it worked though 🤷‍♂️

Thanks a lot. This fixed my issue.

The issue I had was that using Material Top Tabs Navigator in my expo managed project kept showing the error:

Unable to resolve "./PagerViewNativeComponent" from "node_modules/react-native-pager-view/src/PagerView.tsx"

Though together with the version install, I also closed the metro server by doing Ctrl + C in the server terminal and running:

npx expo start -c

to start the server again with the bundler cache cleared, and also clearing cache in the Expo Go mobile app.

[shubhamguptadream11]

@leabaertschi Can you provide a sample reproducer in order to validate this in v7.0.0-rc.2

[weizhe412]

https://github.com/callstack/react-native-pager-view/pull/734 really save my life this bug has been existing for a long time don't forget to rebuild the app, try bun run ios(auto pod install everything from fresh) + npx expo start -c

[FlashGameDev]

#734

So a fix from 2023 still hasn't been merged into 6.6.1 and we have to apply our own patch if we want to have a PagerView inside of any kind of scrollable list? This seems like basic functionality and there's tons of recent issues posted on here with this exact issue still. Is this repo not managed at all anymore?

I tried to apply fix #734 and it doesnt compile anymore into 6.6.1. What version did you apply this to?

if (!self.scrollEnabled) {
        return YES;
    }

adding this is a compile error.

[Dat-Mobile]

I'm so sick of it, even react-native-pager-view version 6.6.1 still hasn't been fixed (Jan 8, 2025). The reason I'm not using 7.0.0 is because it breaks the build for New architecture Here is the patch for the fix of 6.6.1, please feel free to use

index 652a5c1..44a90eb 100644
--- a/node_modules/react-native-pager-view/ios/Fabric/RNCPagerViewComponentView.mm
+++ b/node_modules/react-native-pager-view/ios/Fabric/RNCPagerViewComponentView.mm
@@ -439,6 +439,13 @@ - (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;
+    }
+    
     const auto &viewProps = *std::static_pointer_cast<const RNCViewPagerProps>(_props);
     scrollView.panGestureRecognizer.enabled = viewProps.scrollEnabled;
     return NO;

[dengrf1]

I'm so sick of it, even react-native-pager-view version 6.6.1 still hasn't been fixed (Jan 8, 2025). The reason I'm not using 7.0.0 is because it breaks the build for New architecture Here is the patch for the fix of 6.6.1, please feel free to use

index 652a5c1..44a90eb 100644
--- a/node_modules/react-native-pager-view/ios/Fabric/RNCPagerViewComponentView.mm
+++ b/node_modules/react-native-pager-view/ios/Fabric/RNCPagerViewComponentView.mm
@@ -439,6 +439,13 @@ - (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;
+    }
+    
     const auto &viewProps = *std::static_pointer_cast<const RNCViewPagerProps>(_props);
     scrollView.panGestureRecognizer.enabled = viewProps.scrollEnabled;
     return NO;

Holy shit man, you are my lifesaver, this work around is proved working

[FlashGameDev]

Confirmed this fixes the issue on react 0.76.5 and pager view 6.6.1. Thank you very much.

Would be great to get this fix merged into the next version so we don't have to keep reapply a patch.

[shubhamguptadream11]

Well it seems that from v6.8.1 gestureRecognizer function is now removed to solve some other issue. So this patch is now no longer valid for version >6.8.1. Check here: https://github.com/callstack/react-native-pager-view/releases/tag/v6.8.1