Possibility to set the swipeEnabled to false for the Tabs.Tab

[Audrey-Ann]

Feature request

Hello there! I would like to be able to disable the swipe gesture on the Tabs.Tab. That being said, I want to be in control on when the user is able to swipe between tabs. Just like how material-top-tab-navigator does it :

https://reactnavigation.org/docs/material-top-tab-navigator/#swipeenabled

Thank you!

Current behavior

Right now, there is no way to disable the gesture.

[andreialecu]

As an alternative, check out https://github.com/PedroBern/react-native-collapsible-segmented-view

[Audrey-Ann]

Thank you @andreialecu for your fast response, I will try to Fork your project and add this functionality to it :)

I really like how you did it and I need both functionality: allow swipe and disable it.

If you have any other recommandations please do !

Have a wonderful day and thank you again for providing this cool feature ! (and the code is clean !! Love it)

[Audrey-Ann]

@andreialecu after forking the project and playing with the code, I managed with very few lines of code to achieve this feature ! Here are two commits where I managed to do two things

• Allow disabling the swipe gesture : https://github.com/Audrey-Ann/react-native-collapsible-tab-view/commit/7387522edb1ad8370d25981c3169e967c9ee1052
• Allow hiding a specific tab : https://github.com/Audrey-Ann/react-native-collapsible-tab-view/commit/8963f4911206d42ab8e4c209206361a238110cae (linked to this opened issue #239)

Tested and works well :) Let me know what you think!

[kokweng911]

@andreialecu after forking the project and playing with the code, I managed with very few lines of code to achieve this feature ! Here are two commits where I managed to do two things

• Allow disabling the swipe gesture : Audrey-Ann@7387522
• Allow hiding a specific tab : Audrey-Ann@8963f49 (linked to this opened issue Possibility to hide a Tabs.Tab #239)

Tested and works well :) Let me know what you think!

You can just add pagerProps={{ scrollEnabled: false }} into Tabs.Container as props scrolling is disabled.

[Audrey-Ann]

@kokweng911 oh I will have to test that!

Still need to hide the tab though too if that something we could integrate into the package: https://github.com/Audrey-Ann/react-native-collapsible-tab-view/commit/8963f4911206d42ab8e4c209206361a238110cae

[andreialecu]

You can conditionally not render the tab via condition && <Tabs.Tab.

[Audrey-Ann]

@andreialecu but I still want to show the content of the tab, just want to hide it. :)

[andreialecu]

I'm not sure I understand what you mean by "show" but "hide".

Mind explaining an exact use case?

[Audrey-Ann]

Of course!

My use case is:

• I have a list of tabs A, B and C
• I want to display the content for all active tabs A, B and C
• However I want to show in the header (in my case I use the MaterialTabs) only tabs B and C but hide the A tab label
• If A is the active tab (for instance, it's the first tab of the list, or it gets active programmatically) then we display its content but the tab label itself won't show in the tab list

Hope this explanation is clearer. You can see in the commit https://github.com/Audrey-Ann/react-native-collapsible-tab-view/commit/8963f4911206d42ab8e4c209206361a238110cae, it simply hides the tab "label" / "name".

[Audrey-Ann]

@andreialecu any comments on the above ? :) Thanks in advance