Hide tabs when navigate/push to another page

Ionic Framework Ionic React
2

I found a way that works, but it seems a tad “hacky”.

On page components use either useIonViewWillEnter(() => showTabs()); or useIonViewWillEnter(() => hideTabs());

export function hideTabs() {
  const tabsEl = document.querySelector('ion-tab-bar');
  if (tabsEl) {
    tabsEl.hidden = true;
  }
}

export function showTabs() {
  const tabsEl = document.querySelector('ion-tab-bar');
  if (tabsEl) {
    tabsEl.hidden = false;
  }
}