Hiding tab from the TabBar | Voters

Hiding tab from the TabBar

complete

Drash

Hi, while developing an app I needed to be able to hide a tab in the TabBarBottom. I forked react-navigation and implemented the feature (https://github.com/drash-course/react-navigation/tree/feat-hidden-tabs).
---------------------------------------
To hide a tab by default, you can write:
const tabNav = TabNavigator(myRoutes, {
hiddenTabs: ['SomeTab']
});
----------------------------------------------------------
To make the tab visible in the TabBar again, you can write:
this.props.navigation.dispatch(
NavigationActions.showTab({ tabRouteName: 'SomeTab' })
);
-------------------------------------------
If you think this is a good idea please vote!

January 24, 2018

Jeff Harris

This can be accomplished like so:
navigationOptions: ({ navigation }) => ({
tabBarButtonComponent: (routeName, onPress) => {
return null;
}
}),
v4.0.10

satya164

marked this post as

complete

https://reactnavigation.org/blog/2020/02/06/react-navigation-5.0.html

Michael

satya164: I apologize if I am missing something obvious, however I can't figure out how this is complete based on the linked release note. Could you please elaborate.

Marcus Zanona

Michael: besides that link being broken now, I had no clue on how to get this working until this which worked pretty well: https://github.com/react-navigation/react-navigation/issues/5230#issuecomment-649206507

David Goodman

Another reason would be to show a main/home dashboard page when you hit the start of the app... and still show the other routes/screens you can go to on the bottom tab bar. To get back to the dashboard we just want to have a profile icon you hit that'll take you back to the 'home dashboard'

Luis Suarez

I made an npm package for that, check :

https://www.npmjs.com/package/react-navigation-selective-tab-bar

Brent Vatne

marked this post as

in progress

this will be made possible due to the same work responsible for https://react-navigation.canny.io/feature-requests/p/dynamic-routes-for-navigators

it won't be ready for a while but you can follow progress on https://github.com/react-navigation/navigation-ex

Juan P. Ortiz

The problem with

tabBarOptions

is that only hide the current navigation (tabs) for the selected screen. But does not hide/show the tabs.

tabBarOptions: {
      visible: false
    }

Custom solution

I made some special class to achieve this using

createMaterialTopTabNavigator

export default class CustomTabsNavigator extends Component {
  // Final navigation setup with screens
  TabsNavigation;
  constructor(props) {
    super(props);
    // Only this is necessary if you just want to hide/show without change it.
    this._setScreens();
  }
  // This is necessary if you want to hide/show depending on some user behavior
  componentDidUpdate(prevProps) {
    // Add your condition to avoid infinite renders
    if (prevProps.foo === this.props.foo) return;
    this._setScreens();
  }
  // Actual code to show/hide based on props.
  _setScreens = () => {
    const { isAdmin } = this.props;
    const screens = {};
    const settings = {
      tabBarOptions: {
        style: {...}
      }
    };
    // Set tabs depending on user and state
    if (isAdmin) {
      screens.Dashboard = {
        screen: DashboardScreen,
        navigationOptions: { ... }
      };
    }
    screens.Home = { screen: HomeScreen };
    this.TabsNavigation = createMaterialTopTabNavigator(screens, settings);
    // Since we are not using setState
    this.forceUpdate();
  };
  render() {
    // AppContainer is required in react-native version 3.x
    const { props } = this;
    const NavigatorTabs = createAppContainer(this.TabsNavigation);
    return <NavigatorTabs screenProps={{ ...props }} />;
  }
}

#Implementation of tabs:

Wilf Engel

Is there a solution for this yet?

Sajid Ali

Any luck with the dynamic tab navigation feature?

rjklj

There is a workaround, documented here: https://stackoverflow.com/questions/54872145/programatically-hiding-and-showing-individual-tabs-in-react-native-router-flux-t/54872146#54872146

Niels Bokmans

Still needed. In my use case I want to dynamically show bottom tabs depending on which permissions/modules are enabled. This is only known at runtime (after login)

→