iOS flickering bug in ionic react

Ionic Framework Ionic React
1

Ionic version:

7.1.1

Current behavior:
This is only happening on iOS emulator and real devices
When I push to a new page and go back, the whole page or parts of the page are flickering.

Expected behavior:

No flickering on go back

Steps to reproduce:

Run the project from the repo below, install with yarn and run on iOS device. Press the next button and then back repeatedly.

Code to reproduce:

GitHub - joebasset/iOS-Flicker-Bug

Video example:

ionic info:

Ionic:

Ionic CLI : 7.1.1 (/opt/homebrew/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/react 7.5.6

Capacitor:

Capacitor CLI : 5.5.1
@capacitor/android : 5.5.1
@capacitor/core : 5.5.1
@capacitor/ios : 5.5.1

Utility:

cordova-res : 0.15.4
native-run (update available: 2.0.0) : 1.7.4

System:

NodeJS : v20.3.0 (/opt/homebrew/Cellar/node/20.3.0_1/bin/node)
npm : 9.6.7
OS : macOS Unknown

3 Likes
2

Hello! I am facing the same issue!

3

Hello, me too, please help!

4

I didnt realise we have this topic and I created my own one. Anyway, I’m adding here a GIF so no need to download anything.

Recording 2023-12-07 162603

1 Like
5

I have fixed my flickering. It turned out to be completely my fault :slight_smile:

Have you tried updating to latest? I see your ar using Ionic 7.0. I don’t have any single flickering and I am using 7.6

6

Okay i think i was able to fix it. Previously this is how we use router guards:

<IonRouterOutlet animated>          
           {COMMON_ROUTES.map((item) => (
            <AuthenticatedRoute
              key={item.path}
              path={item.path}
              component={item.component}
              exact
            />
          ))}
</IonRouterOutlet>

Simply put, we use custom component and either return the component or return a redirect depending on the authentication. Turns out flickering only happens on navigation if IonRoute is not a direct child of the IonRouterOutlet

so what i did instead is something like:

<IonRoute
          path={LOGIN}
          render={(props) => unauthenticatedRender(props, baseUser, SignIn)}
          exact={true}
        />

where unauthenticatedRender:

import isNull from "lodash/isNull";
import { Redirect } from "react-router-dom";
import { LazyExoticComponent, Suspense } from "react";

import { BaseUser } from "../../../Common/models/user";
import { COMPLETE_SIGN_UP, DASHBOARD } from "../../constants/routes";

export const unauthenticatedRender = (
  props: any,
  user: BaseUser | undefined | null,
  C: (() => JSX.Element) | LazyExoticComponent<() => JSX.Element>
) => {
  const path = props.location.pathname;
  if (user !== undefined && !isNull(user)) {
    if (!user.completedSignUp) {
      return <Redirect to={COMPLETE_SIGN_UP} />;
    }
    return <Redirect to={DASHBOARD} />;
  } else {
    return (
      <Suspense>
        <C {...props} />
      </Suspense>
    );
  }
};

This solved it for me! hope this can help