Disable Tab.Navigation screen change when using ScrollView inside Screen

Viewed 22

I have an implementatition like:

import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
const Tab = createMaterialTopTabNavigator();

// ...

<Tab.Navigation>
  <Tab.Screen title="example" component={WithTabNav} />
  <Tab.Screen title="another" component={RegularView} />
</Tab>

And the implementation for WithTabNav is essentially:

<View>
  <ScrollView horizontal>
    // Here I have a list of buttons that in total go past screen width
  </ScrollView>
</View>

Otherwise it works as expected, but when I reach the end of ScrollView it will also scroll away from the WithTabNav component to the other navigation Tab.

How can I prevent that behaviour? So no matter where, or how many times you drag the ScrollView inside WithTabNav component, it would not scroll to the other component (RegularView) in the Tab.Navigation?

ScrollView only seems to listen to tabPress and tabLongPress, but not for example something like dragEnd or viewEnd or anything like that that would tell that I have dragged the ScrollView to the end of it, where I could then use eg. event.preventDefault() or such.

Obviously it should still scroll if I drag from outside of ScrollView area.

0 Answers
Related