Hiding IonTab on subpages - Ionic React 5

Question

I am building Ionic React application, and the version of ionic is 5. In my application, I have bottom navigation. I have mentioned the logic of bottom navigation in App.tsx.

I have an add button on the Dashboard page on clicking that button I want a page to open which will not contain the bottom navigation. I got many answers over the internet which is for Ionic-Angular. I am specifically looking for an answer Ionic-React.

App.tsx    
     <IonContent>
        <IonReactRouter>
          <IonTabs>
            <IonRouterOutlet>
              <Route path="/profile" component={Profile} exact={true} />
              <Route path="/dashboard" component={Dashboard} exact={true} />
              <Route path="/dashboard/addInfo" component={Info} exact={true} />
              <Route path="/" render={() => <Redirect to="/dashboard" />} exact={true} />
            </IonRouterOutlet>
            <IonTabBar slot="bottom">
              <IonTabButton tab="home" href="/home">
                <IonIcon icon={home} />
                <IonLabel>Home</IonLabel>
              </IonTabButton>
              <IonTabButton tab="profile" href="/profile">
                <IonIcon icon={profile} />
                <IonLabel>Profile</IonLabel>
              </IonTabButton>
              <IonTabButton tab="dashboard" href="/dashboard">
                <IonIcon icon={grid} />
                <IonLabel>Dashboard</IonLabel>
              </IonTabButton>
            </IonTabBar>
          </IonTabs>
        </IonReactRouter>
      </IonContent>

Gautama

Did you add the tabs in app component. html or inside a normal page? – Underhanded

@MostafaHarb I have added in App.tsx – Gautama

Why not add then in a new page and add the routes as children to this page so the tab bar will apear only on this new page children and not for the whole project – Underhanded

@MostafaHarb can you please give some examples. I am not sure what you are saying. Sorry, I am really new to this framework – Gautama

Look i don't work on ionic-react but you could do something like define a variable of type boolean in app.tsx and in html part u add show if boolean u declared is true , and add event listner for router so it gets the active url from the event each time the user navigate in app, and inside the subscribtion of this event you check if the event == '/the page you don't want the tab to be in' then the boolean variable you declared will be false and thus will hide the tab from that page – Underhanded

this.props.history.listen((location, action) => { console.log("on route change"); }); i think in react you can get it by this way and location will be the url, anyway test it and that will be the point . Hope i did help as much i as could. – Underhanded

Answer 1

This might be what @MostafaHarb was trying to explain. You can have nested IonRouterOutlets, so place your tabs within a TabContainer component off your main App.tsx (shown here as a render prop on the /tabs Route). You will likely need to provide a fallback route, in this case there's a redirect to the tabs Route when the path is "/"

        <IonReactRouter>
              <IonRouterOutlet>
                <Route path="/notabs" render={() => <div>a page no tabs</div>} />
                <Route
                  path="/tabs"
                  render={() => (
                      <IonTabs>
                        <IonRouterOutlet>
                          <Route
                            path="/tabs/tab1"
                            component={Tab1}
                            exact={true}
                          />
                          <Route
                            path="/tabs/tab2"
                            component={Tab2}
                            exact={true}
                          />
                          <Route
                            path="/tabs/tab3"
                            component={Tab3}
                            exact={true}
                          />
                        </IonRouterOutlet>
                        <IonTabBar slot="bottom">
                          <IonTabButton tab="tab 1" href="/tabs/tab1">
                            <IonIcon icon={circle} />
                            <IonLabel>Tab1</IonLabel>
                          </IonTabButton>
                          <IonTabButton tab="tab 2" href="/tabs/tab2">
                            <IonIcon icon={square} />
                            <IonLabel>Tab2</IonLabel>
                          </IonTabButton>
                          <IonTabButton tab="tab 3" href="/tabs/tab3">
                            <IonIcon icon={triangle} />
                            <IonLabel>Tab3</IonLabel>
                          </IonTabButton>
                        </IonTabBar>
                      </IonTabs>
                  )}
                />
                <Route
                  path="/"
                  render={() => <Redirect to="/tabs" />}
                  exact={true}
                />
              </IonRouterOutlet>
        </IonReactRouter>
    </IonApp>
  );

Good luck!

Everara

I've been looking for this for so long fr – Corrade

Answer 2

I did something like this and that worked for me. I created an id for the tabs and then manipulated that to show or hide

    function showTab() {
       const tabBar = document.getElementById('appTabBar');
       if (tabBar !== null) {
           console.log("enabled")
           tabBar.style.display = 'flex';
       }
    }

function hideTab() {
   const tabBar = document.getElementById('appTabBar');
   if (tabBar !== null) {
      tabBar.style.display = 'none';
   }
}

<IonTabBar slot="bottom" id="appTabBar" >
      <IonTabButton tab="account" href="/account">
           <IonIcon icon={personCircleOutline}/>
           <IonLabel>Profile</IonLabel>
           </IonTabButton>
    </IonTabBar>

Percuss