Disable Tab.Navigation screen change when using ScrollView inside Screen

Issue

This Content is from Stack Overflow. Question asked by Juha Untinen

I have an implementatition like:

<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.



Solution

This question is not yet answered, be the first one who answer using the comment. Later the confirmed answer will be published as the solution.

This Question and Answer are collected from stackoverflow and tested by JTuto community, is licensed under the terms of CC BY-SA 2.5. - CC BY-SA 3.0. - CC BY-SA 4.0.

people found this article helpful. What about you?