Hiding Tab Bar for certain routes

Ionic Framework Ionic React
1

What is the Ionic way of hiding Tab Bar for certain routes?

Consider my routes:

<IonTabs>
  <IonRouterOutlet>
    <Route path="/app/feed" component={FeedTemplate} exact={true} />
    <Route path="/app/messages" component={MessagesPage} exact={true} />
    <Route
      path="/app/messages/:messageId"
      component={MessageTemplate}
      exact={true}
    />
    <Route
      path="/app"
      render={() => <Redirect to="/app/feed" />}
      exact={true}
    />
  </IonRouterOutlet>

  <IonTabBar
    slot="bottom"
  >
    <IonTabButton
      tab="tab1"
      href="/app/feed"
    >
      <HomeIcon className="w-6 h-6" />
      <IonLabel>Feed</IonLabel>
    </IonTabButton>
  </IonTabBar>
</IonTabs>

If I navigate to /app/messages/randomId the Tab Bar is still rendered.

Even if I use nested routes like so:

const MessagesPage = () => {
  const match = useRouteMatch();
  return (
    <IonPage>
      <IonRouterOutlet>
        <Route path={`${match.url}/:messageId`} component={MessageTemplate} />
      </IonRouterOutlet>
    </IonPage>
  );
};

The TabBar will still render on my page.

I have no way of conditionally rendering it as any time the component is not rendered I get the error Error: IonTabs needs a IonTabBar.

How do I correctly not render the tab navigation on certain pages?

2

I’ve also tried rendering all my tabs in a specific nested route:

         <IonRouterOutlet>
            <Route path="/app/tabs" component={TabsPage} />
            <Route path="/app/messages" component={MessagesPage} />
            <Route
              path="/app"
              render={() => <Redirect to="/app/tabs" />}
              exact={true}
            />
          </IonRouterOutlet>

But if I try to navigate to /app/messages the screen will blank out before the animation plays, which doesn’t look great.

3

I hide the tab bar during onboarding with a function. I added the id app-tab-bar to ` and then:

const hideTabBar = (): void => {
  const tabBar = document.getElementById('app-tab-bar');
  if (tabBar !== null) {
    tabBar.style.display = 'none';
  }
};

And then I show it again with another function:

// https://stackoverflow.com/a/62097522
const showTabBar = (): void => {
  const tabBar = document.getElementById('app-tab-bar');
  if (tabBar !== null) {
    tabBar.style.display = 'flex';
  }
};

On the routes that need the tab bar shown, I use the hook:

  useIonViewDidEnter(() => {
    showTabBar();
  });
2 Likes
4

Ionic React Tabs (forked) - StackBlitz

I create a context to manage hiding and showing the tabs, here is an example project in stackblitz

Learn to Build Mobile Apps With Ionic Framework, ReactJS and Capacitor: Hiding Tabs on Detail Page - YouTube

2 Likes
5

I was afraid setting display: none was going to be the solution :joy:

Thank you for confirming it!

6

seemed to be the easiest and most straightforward… that is usually what I go for

7

Seems a lot like a hack, it’s weird there’s no better way :man_shrugging:

I might try to animate it out at least.

8

For my case it was just as easy to make a style that hides the toolbar on a certain page and not mess with react or js at all.

ion-tab-bar[selected-tab="login"] {
  /* Your styles for the selected ion-tab-bar here */
  display: none;
}