How to disable tab switching on tab press?

Shail Patel 0
Viewed 30

I am using react-native-tab-view for tabs. now i have a very strange use case that i don't want user to traverse to other tabs by clicking on the tab i.e on tab press.

I want to use custom buttons on each tab to traverse back and forth.

cross-platform ios react-native reactjs android
1 Answers

Answering my own question.

For this, there is one prop called onTabPress in TabBar props in react-native-tab-view.

use the following function: preventDefault().

you can do the following to disable tab click.

  • If you want to disable it for particular tab than...
<TabBar onTabPress={({ route, preventDefault }) => {
     // here `route.key` will be your particular tab's route key
     if (route.key === 'home') {
       preventDefault();

      // Do something else
     }   
    }} 
    ... 
    />

  • If you want to disable tab click for all the tabs.

       <TabBar
   {...props}
   onTabPress={({preventDefault}) => {
    preventDefault();
   }}
   />

Note: This will work with react navigation as well. Attaching the link: https://reactnavigation.org/docs/navigation-events/

Shail Patel0
Related