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>
  )
}