Upgrading from version 4 to 5: White background flashing when switching screens

[janoist1]

I'm migrating a RN project version 4 to 5.

When switching screens there's an issue with a white background flashing in.
In v4 this was solved by setting cardStyle: { backgroundColor: material.containerBgColor } in the StackNavigation options.

However in v5 I'm unable to fix it with the same approach:

<Stack.Navigator screenOptions={{ cardStyle: { backgroundColor: material.containerBgColor } }} ...>

White flash has come back. Any idea how to fix it? The docs don't tell too much about the ScreenOptions object, or is this me not being able to find it?

The structure of the navigation may be important:

const AppTabNavigator = () => (
  <Tab.Navigator>
    <Tab.Screen name="Home" component={Home} />
    <Stack.Screen name="ScreenD" component={ScreenD} />
    <Stack.Screen name="ScreenE" component={ScreenE} />
    <Stack.Screen name="ScreenF" component={ScreenF} />
  </Tab.Navigator>
)
...
  <Stack.Navigator
    screenOptions={{ cardStyle: { backgroundColor: material.containerBgColor } }}
  >
    <Stack.Screen name="Home" component={AppTabNavigator} />
    <Stack.Screen name="ScreenA" component={ScreenA} />
    <Stack.Screen name="ScreenB" component={ScreenB} />
    <Stack.Screen name="ScreenC" component={ScreenC} />
  </Stack.Navigator>

Going from ScreenD to ScreenE does the flashing issue. I'm not sure about the other screens as they don't make any network request / async stuff.

[ctopher7]

Try upgrading to the latest version of stack navigator. I experienced this when using the stack navigator below alpha 46 if im not mistaken

[janoist1]

I'm using 5.0.0-alpha.63 :-/

[satya164]

Please provide a runnable repro

[evanheckert]

@satya164 Here's a repro: https://github.com/evanheckert/header-example

Running a simulator running iOS 13.3 on a simulated iPhone 11 Pro Max. Symptoms are identical when operating through the latest Expo client app for iOS.

[satya164]

Which platform?

[satya164]

I see you are using native stack in your example, this issue was opened for stack navigator. I don't think it's the same thing.

Closing this issue due to no response from author.

[pustylnikov]

Just wrap your navigator in View component, and set backgroundColor. I usually set a color like the background color of the header.

For example:

const MyStackNavigator = () => (
  <View style={{ flex: 1, backgroundColor: '#000' }}>
    <Stack.Navigator>
      <Stack.Screen name="ScreenA" component={ScreenA} />
      <Stack.Screen name="ScreenB" component={ScreenB} />
      <Stack.Screen name="ScreenC" component={ScreenC} />
    </Stack.Navigator>
  </View>
)