I have been researching this for days after days and still didn't get what I want.
I don't even know why this has not been raised yet..
For example, if you use
const Tab = createMaterialTopTabNavigator();
from @react-navigation/material-top-tabs
export class TopTab extends React.Component {
render() {
return (
<Tab.Navigator
swipeEnabled={false}
tabBar={(props) => <CustomTabBar {...props} />}
>
<Tab.Screen name="First" component={FirstView} />
<Tab.Screen name="Second" component={SecondView} />
<Tab.Screen name="Third" component={ThirdView} />
</Tab.Navigator>
);
}
export class FirstView extends React.Component {
render() {
return (
<ScrollView horizontal>
.... contents
</ScrollView>
);
}
then ScrollView horizontal swipe won't work within these Views.
what I've tried:
swipeEnabled=true
nestedScrollViewEnabled=true
Is there any known solution to this?
I've tried pager option to customize ViewPaging with react-native-community/viewpager, still no luck.
Please help!
Ah, feels stupid now. The problem wasn't actually neither ScrollView nor Navigator.
It was Touchable components masking scrolling behaviour.