Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Block/Disable tabs in TabNavigator - react-navigation

I have a TabNavigator as shown in the picture. Header Image

I am using TabNavigator for creating these tabs as below.

const Tab_Navigator = TabNavigator({
    First:{
        screen: First,
    },
    Second:{
        screen: Second,
    },
    Third:{
        screen: Third,
    },

Now I want to block/disable "Second" and "Third" tabs. It should be visible but one shouldn't able to navigate to them.

I tried blocking these tabs as shown here but I guess I am missing something. My try:

Tab_Navigator.router.getStateForAction = (action, state) => {
if( action.type === NavigationActions.navigate({ routeName: "Second"}) ||
    action.type === NavigationActions.navigate({ routeName: "Third"}))
{
    return null;
}

return Byte.router.getStateForAction(action, state);

};

like image 584
Smit Thakkar Avatar asked Aug 11 '17 15:08

Smit Thakkar


1 Answers

In this case, the action.type = "Navigation/NAVIGATE" and action.routeName is the name of your tab. It is just a little different from the ReactNavigation Routers example. The following should work:

const defaultGetStateForAction = Tab_Navigator.router.getStateForAction;

Tab_Navigator.router.getStateForAction = (action, state) => {
  if ((action.type === NavigationActions.NAVIGATE) &&
     (action.routeName === "Second" || action.routeName === "Third") {
    return null;
  }

  return defaultGetStateForAction(action, state);
};

EDIT: Here is an image of the the Chrome Debugger stopped at a breakpoint in a very similar piece of code(tab names are different), but it shows the values of the "action" object being passed into this function. react native router disable tab

like image 158
Jeremy Schrader Avatar answered Oct 10 '22 07:10

Jeremy Schrader