React native - Material Top Tabs Navigator with swipe list view swipe inside the tab

Question

I'm using react navigation 5.x material top tabs navigator in my app with two tabs, Inside of both the tabs I have swipe list view component.

I want to be able to swipe the rows on the list view but when I try to swipe them the tab is also gets swiped.

I can cancel the swipe on the tabs for good, but I want it to be enabled when the user will swipe outside of the dynamic list.

How can I do that? thanks for the help

Answer 1

I'm using @react-navigation v6.

on SwipeListView implement

  onTouchStart={({nativeEvent: {locationX: x}}) => {
    if (x > TAB_SWIPE_OFFSET &&
      x < Dimensions.get('screen').width - TAB_SWIPE_OFFSET
    ) {
      navigation.setOptions({swipeEnabled: false});
    } else {
      navigation.setOptions({swipeEnabled: true});
    }
  }}

  onTouchEnd={() => navigation.setOptions({swipeEnabled: true})}