White flickering when transitioning to a new screen and the background is a dark color?

Question

I am experiencing this when transitioning to one screen to another with two different navigators: ex-navigation and the new one React Navigation . There is a white flickering for a second (or half a second). Looking for a solution I found that other navigators have the same problem. For example the navigator from wix HERE. From the link:

Ok, the problem is, that React styles applies after the navigation started, and by default the backgroundColor is white, so this is the flicker effect..

Someone having the same issue?

Solved with: https://medium.com/@Krizzu/how-to-change-background-color-of-rootview-in-react-native-3279417c34bb My TabNavigator was giving me a white flash before mounting my screens. — Jordan Grant, Sep 01 '19 at 23:54

score 18 · Answer 1 · answered Dec 18 '20 at 11:39

18

I resolved the white flickering issue by setting the property in NavigationContainer of React-Navigation v5.

<NavigationContainer theme={{ colors: { background: '#000' } }}>
{...}
</NavigationContainer>

It helped me remove white flickering as I updated the color same as my background color BLACK.

https://github.com/software-mansion/react-native-screens/issues/380#issuecomment-748038449

answered Dec 18 '20 at 11:39

Ubaid

737
8
18

However it does fix the issue, it deafults the otherwise white backgrounds to black. – Dec 30 '20 at 16:04
4

Just spent hours on this, and your solution worked. Thanks! – spanky Feb 17 '21 at 05:10
1

Thanks, life saver, the solution also works fine with react-navigation v6+ – nima Sep 02 '22 at 06:06

Dror Bar · Answer 2 · 2019-11-17T08:12:50.693

3

For me this did the trick:

cardStyle: { opacity: 1 }

Example:

const RootNavigator = createStackNavigator({
    Login: { screen: Login },
    Main: { screen: DrawerNavigator }
},
    {
        initialRouteName: 'Login',
        cardStyle: { opacity: 1 } // Prevent white flicker on Android when navigating between screens
    }
);

export default createAppContainer(RootNavigator);

edited Nov 17 '19 at 08:12

answered Mar 23 '19 at 14:06

Dror Bar

686
2
10
19

Where you have added the cardStyle. (i.e) inside the navigationOptions or defaultNavigationOptions – sejn Nov 13 '19 at 09:08
I edited my answer to give an example. It's not inside navigationOptions. – Dror Bar Nov 17 '19 at 08:13
The above not worked for iOS. Did you have any fix for iOS – sejn Nov 18 '19 at 04:17

score 2 · Answer 3 · answered Jul 09 '21 at 11:58

I know that I am posting way late here, but yeah if someone get help by this then it'll be worth it.

I also faced the same issue because I was using dark theme for my project and whenever the navigation happened a white screen flashed for some milliseconds.

I resolved this issue by adding the same theme background color to NavigationContainer theme prop like below

<NavigationContainer theme ={{colors:{background: /*same background color of your project */}}}> .... </NavigationContainer>

This solved my issue, hope it solves other's too.

Thank You..

score 1 · Answer 4 · answered Dec 21 '18 at 07:47

1

When use DrawerNavigator and StackNavigator, need:

cardStyle: {
    backgroundColor: 'transparent',
},

and need:

use react-native-root-view-background to setRootViewBackgroundColor('black')

answered Dec 21 '18 at 07:47

Li Zheng

685
7
11

score 1 · Answer 5 · answered Jun 15 '21 at 18:54

1

For people using expo, you also need to pass a backgroundColor in your app.json. So you should set this to some dark color from your app's color scheme.

// app.json

{
  "expo": {
    ...
    "backgroundColor": "#1a202c"
  }
}

answered Jun 15 '21 at 18:54

Divyanshu Maithani

13,908
2
36
47

score 1 · Answer 6 · answered Oct 06 '21 at 07:26

I've created a Typescript cardStyleInterpolator function based on scaleFromAndroid to prevent the whitespace around the screen when switching the screens.

This function removes the opacity: 0 and the end of transition and adds a overlayStyle to the border of the screen while switching beetween the screens.

Example:

<Stack.Navigator
  screenOptions={{
    headerShown: false, /* Hide the header */
    cardStyleInterpolator: scaleCenterAndroidInterpolator /* Overrides the default cardStyleInterpolator */
  }}>
  ...
</Stack.Navigator>

    const scaleCenterAndroidInterpolator = ({ 
        current, 
        closing, 
        next 
    }: StackCardInterpolationProps)  => {

        const { add, multiply } = Animated;

        const handleConditionalScale = (
            condition: Animated.AnimatedInterpolation, 
            main: Animated.AnimatedInterpolation, 
            fallback: Animated.AnimatedInterpolation) => (
                add(multiply(condition, main), multiply(condition.interpolate({
                    inputRange: [0, 1],
                    outputRange: [1, 0]
                  }), fallback))
            )

        const progress: Animated.AnimatedAddition = add(current.progress.interpolate({
            inputRange: [0, 1],
            outputRange: [0, 1],
            extrapolate: 'clamp'
          }), next ? next.progress.interpolate({
            inputRange: [0, 1],
            outputRange: [0, 1],
            extrapolate: 'clamp'
          }) : 0);

        const opacity: Animated.AnimatedInterpolation = progress.interpolate({
            inputRange: [0, 0.75, 0.875, 1, 1.0825, 1.2075, 2],
            outputRange: [0, 0, 1, 1, 1, 1, 1]
        });

        const scale: Animated.AnimatedAddition = handleConditionalScale(closing, current.progress.interpolate({
            inputRange: [0, 1],
            outputRange: [0.925, 1],
            extrapolate: 'clamp'
          }), progress.interpolate({
            inputRange: [0, 1, 2],
            outputRange: [0.85, 1, 1.075]
          }));

        const overlayStyle: { opacity: Animated.AnimatedInterpolation } = {
            opacity: current.progress.interpolate({
                inputRange: [0, 1],
                outputRange: [0, 0.5],
                extrapolate: 'clamp',
            })
        }

        return {
            cardStyle: {
                opacity: opacity,
                transform: [
                    { scale }
                ],
            },
            overlayStyle
        }

    }

score 0 · Answer 7 · answered Feb 23 '17 at 07:10

I have had the same problem. And it seems to me that there are two solutions to that.

First solution comes from the link you share. Basically you can add a background color to your Navigator component.

Second solution, which I applied to my project previously, is not an exact one but a workaround. I changed how Navigator component transitions screens back and forth by changing SceneConfigs, from Navigator.SceneConfigs.FloatFromRight to Navigator.SceneConfigs.PushFromRight. So my Navigator component become something like;

        <Navigator
            ref={(ref) => this._navigator = ref}
            configureScene={(route) => {
                return {
                    ...Navigator.SceneConfigs.PushFromRight,
                    gestures: {}
                };
            }}
            initialRoute={{
                id: (Platform.OS === "android" || Platform.OS === "ios") ? 'splashscreen' : 'login',
                statusBarHidden: true
            }}
            renderScene={this.renderScene}
        />

score 0 · Answer 8 · answered Jul 18 '17 at 11:58

0

You can set background color in your navigator like this:

<
Navigator style={{flex: 1}} 
  transitionerStyle={{backgroundColor: 'black'}} ...

Hope this helps-

answered Jul 18 '17 at 11:58

Abhay Dixit

998
8
28

score 0 · Answer 9 · answered Oct 18 '21 at 20:11

0

For me the solution was setting the layout option. I am using wix-react-native-navigation:

    layout: {
      backgroundColor: "#000",
      componentBackgroundColor: "#000",
    },

answered Oct 18 '21 at 20:11

Milan Rakos

1,705
17
24

score 0 · Answer 10 · answered Jan 14 '22 at 10:38

None of the above answers worked for me. For iOS, I changed the background color in AppDelegate.m

if (@available(iOS 13.0, *)) {
rootView.backgroundColor = [UIColor blackColor]; ---> changed this
} else {
rootView.backgroundColor = [UIColor blackColor]; ---> and this
}

For android: (It's not perfect, black screen is shown for a while after splash srceen. My theme was dark so, it was good to go.) In MainActivity.java,

@Override
protected void onCreate(Bundle savedInstanceState) {
SplashScreen.show(this, true); ---> added true here
super.onCreate(savedInstanceState);
}

In styles.xml,

<style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
    <item name="android:windowBackground">@android:color/transparent</item>
    <item name="windowNoTitle">true</item>
    <item name="android:statusBarColor">@android:color/transparent</item>
    <item name="windowActionBar">false</item>
    <item name="android:windowFullscreen">true</item>
    <item name="android:windowContentOverlay">@null</item>
    <item name="android:backgroundDimEnabled">false</item>
    <item name="android:windowDisablePreview">true</item>
</style>

White flickering when transitioning to a new screen and the background is a dark color?

10 Answers10