[FIXED] How to disable tab switching on tab press?

Issue

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.

Solution

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/

Answered By - Shail Patel

Answer Checked By - Terry (PHPFixing Volunteer)