Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Hiding IonTab on subpages - Ionic React 5

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>
like image 575
Tanvi Jain Avatar asked Mar 31 '20 07:03

Tanvi Jain


People also ask

How to hide ionic tabs on sub pages in ionic framework?

How to hide ionic tabs on sub pages If you have hard time to find solution for hiding tabs in Ionic framework 4/5 here is simplest solution for you. Open your page.ts file (page that you don't want to show tabs on it) then place this code in constructor part.

What is the tab property of ion-tab-button?

When used with Angular's router the tab property of the ion-tab-button should be a reference to the route path. No properties available for this component. Emitted when the navigation has finished transitioning to a new component. Emitted when the navigation is about to transition to a new component.

How do I style the ion-tabs component?

The ion-tabs component does not have any styling and works as a router outlet in order to handle navigation. It does not provide any UI feedback or mechanism to switch between tabs. In order to do so, an ion-tab-bar should be provided as a direct child of ion-tabs. Both ion-tabs and ion-tab-bar can be used as standalone elements.

How does the ion-tab-button work with Ion-routers?

When used with Ionic's router ( ion-router) the tab property of the ion-tab matches the component property of an ion-route. Each ion-tab-button will activate one of the tabs when pressed. In order to link the ion-tab-button to the ion-tab container, a matching tab property should be set on each component.


2 Answers

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>
like image 194
Panch Avatar answered Sep 21 '22 13:09

Panch


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!

like image 41
rakitin Avatar answered Sep 19 '22 13:09

rakitin