Description
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: #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>
)
}