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

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