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

No, I left this matter, maybe I will try in the future but don't count on it — Chapnik
– Chapnik, Commented Dec 21, 2021 at 21:15

WanChiu · Accepted Answer · 2023-01-03 07:25:12Z

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})}

edited Jan 3, 2023 at 7:25

answered Jan 3, 2023 at 7:23

WanChiu

114 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related