Hiding Tab Bar for certain routes

Ionic Framework Ionic React
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