react-nativereact-native-flatlistreact-native-navigationreact-native-scrollviewreact-native-swiper

React Native ScrollView won't swipe with ViewPager or createMaterialTopTabNavigator


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!


Solution

  • Ah, feels stupid now. The problem wasn't actually neither ScrollView nor Navigator.

    It was Touchable components masking scrolling behaviour.