Disabling swipe to go back for Ion-Tabs

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 me Uncaught 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 :confused:

Check this example, it was quite helpful to me to understand tabs.

The documentation on routing in React could definitely be improved.