I’m currently adding more Ionic Components to our app, which includes IonPage
and IonTabs
.
Everything is working pretty well, however on iOS I’m able to swipe to go back between IonTabs
pages, which doesn’t look right.
I uploaded a video example here.
In the above I’m simply tapping on the tabs at the bottom, then swiping to go back once. The animation however plays twice and displays white as a background.
Is this intended behavior? Is there a way to disable it?
Here’s a simplified version of my code:
<IonPage>
<IonTabs>
<IonRouterOutlet>
<Route path={`${match.path}/tab1`}>
<Tab1/>
</Route>
<Route path={`${match.path}/tab2`}>
<Tab2/>
</Route>
<Route path={`${match.path}/different-page`}>
<DifferentPage/>
</Route>
</IonRouterOutlet>
<IonTabBar
slot="bottom"
>
<IonTabButton tab="tab1" href="/app/dashboard">
<IonLabel>Tab 1</IonLabel>
</IonTabButton>
<IonTabButton tab="tab2" href="/app/shift-list">
<IonLabel>Tab 2</IonLabel>
</IonTabButton>
</IonTabBar>
</IonTabs>
</IonPage>
I’m pretty sure this is correct, but please correct me if it isn’t.
EDIT:
This example seems to want me to wrap my pages in an <IonTab>
component, but:
- I don’t understand how this is to be used along with
<IonRouterOutlet>
and<Route>
- If I moved it outside of
<IonRouterOutlet>
, no pages at all render. -
<IonTabs>
errors out if I remove<IonRouterOutlet>
, telling meUncaught Error: IonTabs must contain an IonRouterOutlet
Is there a working React example anywhere? I assume angular and React have completely different requirements hence why it isn’t working.
EDIT2:
I found this starter and it looks just like my app so I’m pretty confused