[React] Ionic is not doing nice transitions using tabs, router and backbuttons

Ionic Framework Ionic React
1

Hello! I’ve been already struggling for a lot of time trying to solve an issue with the navigation in React. I’m using Ionic React 7.0 and Started with the tabs template.

My actual setting is:

<IonApp>
      <GameProvider roomName={roomName}>
        <IonReactRouter>
          <IonTabs>
             <IonRouterOutlet>
              <Redirect exact path="/" to="/game-settings" />
              <Route exact path="/gameSettings" component={GameSettings}>
              <Route exact path="/gameSettings/teams/:roomName" component={TeamSettings}>
              <Route exact path="/gameSettings/rules/:roomName" component={RuleSettings}>

…

Each component is exported using React.Memo([TheComponent]).

Also each one of the compoenets has the following initial structure:

<IonPage>
      <IonHeader>
        <IonToolbar>
          <IonTitle>Crear juego</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent fullscreen>
        <IonHeader collapse="condense">
          <IonToolbar>
            <IonTitle size="large">Crear juego</IonTitle>
          </IonToolbar>
        </IonHeader>

Any help? I have already researched everything I could, but no luck at all. It happens as PWA, and as webapp
Recording 2023-12-07 162603

2

It looks like your component is getting reloaded unnecessarily. You should be able to get <IonPage> to render without flickering even without using useMemo().

Are you using any of the Ionic lifecycle hooks, like useIonViewDidEnter()? I’d first check for hooks causing unnecessary reloads during the transition.

3

Turned out to be my fault. The way I was hiding “internal” or “routes under authentication” was causing it. It works now perfectly.