iOS flickering bug in ionic react

Ionic version:


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 CLI : 7.1.1 (/opt/homebrew/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/react 7.5.6


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


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


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


Hello! I am facing the same issue!

Hello, me too, please help!

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

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

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

<IonRouterOutlet animated>          
           { => (

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:

          render={(props) => unauthenticatedRender(props, baseUser, SignIn)}

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 (
        <C {...props} />

This solved it for me! hope this can help