Screen flicker on Android with stack navigation

[jordiepasman]

Current behavior

On Android only: every time when navigating between screens in stack navigation there will be a white flickering.
This is much harder to see on a light background but on a black screen background it is very noticeable.

I have already found and tried previous given workarounds:

• Setting setting the dark theme (or background color) on NavigationContainer but we using black and white backgrounds in our application so it is still visible at least by one of them. (but actually still visible at all times)
• Also tried animationEnabled: false but then you won't have any animations at all.
• cardStyle on the navigator.

There have been previous issues but I haven't really found a good solution to this yet.

This is an example on a Samsung Galaxy S20+.
And i've added a repo to this example application.

White.flickering.2.0.mp4

Expected behavior

No flickering and smooth navigation.

Reproduction

https://github.com/jordiepasman/white-flickering-issue

Platform

• Android
• iOS
• Web
• Windows
• MacOS

Packages

We do not use expo (packages)!

• @react-navigation/​bottom-tabs
• @react-navigation/​drawer
• @react-navigation/​material-bottom-tabs
• @react-navigation/​material-top-tabs
• @react-navigation/​stack
• @react-navigation/​native-stack

Environment

• I've removed the packages that I don't use

package	version
@react-navigation/native	^6.0.13
@react-navigation/bottom-tabs	^6.4.0
@react-navigation/material-top-tabs	^6.3.0
@react-navigation/stack	^6.3.4
react-native-safe-area-context	^4.3.1
react-native-screens	^3.18.2
react-native-gesture-handler	^2.5.0
react-native-reanimated	^2.9.1
react-native-tab-view	^3.1.1
react-native-pager-view	^5.4.25
react-native	0.70.0
node
yarn

[raajnadar]

Set the root view colour to solve this issue, https://docs.expo.dev/versions/latest/sdk/system-ui/

[jordiepasman]

@raajnadar Thanks for your comment, but we don't use (and want) anything of Expo.

[raajnadar]

If you use a package from the expo ecosystem that doesn’t mean you need to use expo go, every package works with vanilla react native.

I tried to give you a solution, it is you who needs to find an alternative package if you don't want expo system ui

[jordiepasman]

@raajnadar Yeah I understand that and thank you for your reaction. But is the flickering not a bug of the react-navigation package? As mentioned in my opening post the workarounds I tried does not work perfect in my opinion.

I commented it because the documentation says "you must have the native expo setup" and when I try to install it given me te same errors and I must install expo.
https://github.com/expo/expo/tree/sdk-46/packages/expo-system-ui#extra-setup

And when I should use this package from expo can I set this on every Stack or Screen? Because we using black and white backgrounds in our application so if you not can set it dynamically it is still visible at least one of them.

[raajnadar]

But is the flickering not some issue of the react-navigation package instead to using workarounds?

I don't think it is a workaround, we need to set the root view colour ourselves on android, on ios it is handled properly by the OS.

---

In one of my applications, the dominant colour was orange, this is what I did to solve the issue

1. In the root file inside useEffect, I set the root view colour as orange, (The whole application has the root view colour.

SystemUI.setBackgroundColorAsync("orange")

2. In our home stack (It is a tab with stack screens, they have white colour as BG)

We set the root view colour to white here so that the background of the keyboard is correct and the BG colour is white for the screens & no flicker.

---

Yes you need to do some native config so that expo packages can be used in any react native project, they also have automated installation which will make the process easier

https://docs.expo.dev/bare/installing-expo-modules/

[github-actions]

The versions mentioned in the issue for the following packages differ from the latest versions on npm:

• @react-navigation/stack (found: 6.3.2, latest: 6.3.3)

Can you verify that the issue still exists after upgrading to the latest versions of these packages?

[github-actions]

The versions mentioned in the issue for the following packages differ from the latest versions on npm:

• @react-navigation/stack (found: 6.3.3, latest: 6.3.4)

Can you verify that the issue still exists after upgrading to the latest versions of these packages?

[amalmohann-dgnl]

Issue still there in "@react-navigation/native-stack": "^6.9.2",

[raajnadar]

@amalmohann-dgnl this issue is not related to the native stack

[weishengkui]

@jordiepasman @raajnadar actually, when i set SystemUI.setBackgroundColorAsync("white"), the issue is still exists.

[zahid502]

• @react-navigation/stack

Yes, it's still exist in latest(6.3.4) packages.

[zahid502]

I have an alternative solution to fix this issue:
add the background color of theme in NavigationContainer
@react-navigation/stack : 6.3.4

import {DefaultTheme, NavigationContainer} from '@react-navigation/native';

**const themeColor = {
...DefaultTheme
colors: {
...DefaultTheme.colors,
background: 'black',
},
};

<NavigationContainer theme={themeColor}>
  .........
        .........
</NavigationContainer>**

[jordiepasman]

Hi @zahid502 thanks,

Yes, you can do it.
But then when an app contains both dark and white elements, then there is a black flickering on the white screens.

[zahid502]

Thank you for updating @jordiepasman,

I have fixed it by using dynamic color, not static.
When there is dark mode then I have used black color matching with my dark mode screen color,
similarly when there is light mode, then I have used white color matching with my screen color scheme.
It's worked for me.

const themeColor = {
    ...DefaultTheme,
    colors: {
      ...DefaultTheme.colors,
      background: theme.color.background,   // matching with theme color
    },
  };

Note: But it's not a proper solution of screen flicker, when there are more elements with different colors, then it will also show screen flicker on android.

[trungdvu]

Mine because of the SafeAreaProvider. So I have to change its background color to match with window color.
<SafeAreaProvider style={{backgroundColor: '...'}}> ... </SafeAreaProvider>

[vonovak]

Another solution which will fix this and also help with theming your app is react-native-theme-control, specifically AppBackground component

[Artem-Kalugin]

In my case the problem is related to the default card interpolator, used inside react navigation for android transition animations. Same as @jordiepasman i have a simultaneous two theme application so i cant just set the root view color.

I did a little tweak to default animation, to prevent flashing from being so obvious

Patch file located at node_modules/@react-navigation/stack/src/TransitionConfigs/CardStyleInterpolators.tsx with this

+++ b/node_modules/@react-navigation/stack/src/TransitionConfigs/CardStyleInterpolators.tsx
@@ -299,7 +299,7 @@ export function forScaleFromCenterAndroid({
 
   const opacity = progress.interpolate({
     inputRange: [0, 0.75, 0.875, 1, 1.0825, 1.2075, 2],
-    outputRange: [0, 0, 1, 1, 1, 1, 0],
+    outputRange: [0, 0, 1, 1, 1, 1, 1],
   });
 
   const scale = conditional(

[Jayeshkarma]

Hey just a simple solution add amination in user navigation stack
screenOptions={{ animation:'slide_from_right' }}

[anrodrigues0]

in my case it was SafeAreaView, in which case it defines a background, it can be in the safe area provider as well

<SafeAreaView style={{backgroundColor: ‘white'}}>….

[nabilfreeman]

Hey just a simple solution add amination in user navigation stack screenOptions={{ animation:'slide_from_right' }}

Even better, animation: "ios" results in a much faster slide and nice navbar transition on Android. This removed the flash of unstyled content we were seeing, including that white flash that Expo Router introduced in version 3.