Native apps like navigation (like reddit for example)

Ionic Framework
1

Hi everyone,

I’m using Ionic React 8.8.9 with React Router 5.3.4 and the default IonTabs setup.

My tabs are:

  • Practice
  • Patterns
  • Progress

Suppose I do:

Practice → Patterns → Progress → Patterns → Progress → Patterns → Progress

When I press the Android back button (or browser back), the app goes:

Progress ← Patterns ← Progress ← Patterns ← Progress ← Patterns ← Practice

So every tab switch is replayed.

This also happens in a fresh tabs starter created with:

ionic start tabs-test tabs --type react

What I would like instead is behavior similar to Reddit/Instagram, where repeated switching between tabs does not create an endlessly alternating back history. Ideally something like:

Practice → Patterns → Progress → Patterns → Progress
Back
→ Patterns
Back
→ Practice
Back
→ Exit

or even:

Progress
Back
→ Exit

Is the repeated ping-pong between tabs the intended behavior of IonTabs, or is there a recommended way to achieve Reddit-like back navigation while still using IonTabs?

Current routes:

<IonReactRouter>
  <IonTabs>
    <IonRouterOutlet>
      <Route exact path="/tabs/practice" component={PracticeTab} />
      <Route exact path="/tabs/patterns" component={PatternsTab} />
      <Route exact path="/tabs/progress" component={ProgressTab} />
      <Redirect exact from="/" to="/tabs/practice" />
    </IonRouterOutlet>

    <IonTabBar slot="bottom">
      <IonTabButton tab="practice" href="/tabs/practice" />
      <IonTabButton tab="patterns" href="/tabs/patterns" />
      <IonTabButton tab="progress" href="/tabs/progress" />
    </IonTabBar>
  </IonTabs>
</IonReactRouter>

Has anyone implemented Reddit-style back navigation while keeping Ionic tabs?
any help is much appreciated

2

I had too many problem to make custom navigation on top of the ionic one.
So i made a system that is tight to no framework and can be customized a lot.
if you wanna check @capgo/capacitor-transitions - Capacitor Plugin Doc… | Capgo if anything is missing or blocking you tell me i will update it