CODEWITHSUNDEEP
react-nativereact-navigationreact-native-iostabnavigator
Smit Thakkar
Smit Thakkar

Reputation: 440

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

};

Upvotes: 11

Views: 19301

Answers (4)

Aymen Bou
Aymen Bou

Reputation: 1109

For Version 5.x+ there's a new way to do it.

<Tabs.Screen
  name="Chat"
  component={Chat}
  listeners={{
    tabPress: e => {
      // Prevent default action
      e.preventDefault();
    },
  }}
/>

Here's the reference link to the docs: https://reactnavigation.org/docs/navigation-events/

Upvotes: 8

Jimmi J&#248;nsson
Jimmi J&#248;nsson

Reputation: 179

This is my solution to disable and completely take control over the tabBarButton in React Navigation 6.

// Defining the disabled tabBarButton component
//
const DisabledTabBarButton = ({ style, ...props }: BottomTabBarButtonProps) => (
  <Pressable disabled style={[{ opacity: 0.2 }, style]} {...props} />
)

const Tab = createBottomTabNavigator()

const Router = () => (
<Tab.Navigator>
  <Tab.Screen name="Screen 1" />
  <Tab.Screen name="Screen 2"
    options={{
      // Applying the disabled button
      tabBarButton: DisabledTabBarButton,
    }}
  />
</Tab.Navigator>

export default Router

Upvotes: 4

Asif Shaikh
Asif Shaikh

Reputation: 31

You have to use tabBarOnPress propert under defaultNavigationOptions, and check the route name to which you dont want to navigate return them null else return defaultHandler. Please check the following code

const Tab_Navigator = createBottomTabNavigator({
   First:{
        screen: First,
    },
    Second:{
        screen: Second,
    },
    Third:{
        screen: Third,
    }
}, defaultNavigationOptions: ({ navigation }) => ({
      tabBarOnPress: ({ navigation, defaultHandler }) => {
        if (
          navigation.state.routeName === "Second" ||
          navigation.state.routeName === "Third"
        ) {
          return null;
        }
        defaultHandler();
      },})

Upvotes: 3

Jeremy Schrader
Jeremy Schrader

Reputation: 396

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

Upvotes: 15

Related Questions