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>
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.
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.
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.
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.
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>
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!
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With