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?

Answer 1

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

Answer 2

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);