6.2.0 breaks vertical scrolling of ScrollView parent

[jwh-hutchison]

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

[caraneilwarner]

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 react-native-pager-view@7.0.0-rc.0 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 react-native-pager-view@7.0.0-rc.0. 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 react-native-pager-view@7.0.0-rc.0

[leabaertschi]

react-native-pager-view@7.0.0-rc.0 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 react-native-pager-view@7.0.0-rc.0 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.