White background flashing when switching screens – React-Navigation v5

I faced the same issue and dived into an investigation. It seems that the detachment of the screens causes it. I found a few approaches. You can choose one according to your needs. They are the following:

1. You can specify a view wrapper of the navigator with the same background color as the screens one like:

   <View style={{ flex: 1, backgroundColor: '#YOUR_SCREEN_COLOR' }}>
     // It could be your NavigationContainer or your StackNavigator depends on your goals 
     <Navigator /> 
   </View>
   

2. You can also specify your screen mode to be modal in the stack view config this prevents the screens from being detached like:

   <StackNavigator.Navigator mode="modal">
     {/*.... Your stack screens ... */}
   </StackNavigator.Navigator>
   

3. You can add your custom overlay in screenOptions by using the cardOverlay prop:

   cardOverlay: () => (
     <View
       style={{
       flex: 1,
       backgroundColor: '#YOUR_COLOR',
     }}
   />)
   

   Reference: https://reactnavigation.org/docs/stack-navigator/#cardoverlay

4. You can use the cardStyleInterpolator:

   This allows you to customize the animation transitions when navigating from screen to screen.

   Here are the snippets from the original documentation:

   const forFade = ({ current, closing }) => ({
     cardStyle: {
       opacity: current.progress,
     },
   });
   

   <Stack.Screen
     name="Profile"
     component={Profile}
     options={{ cardStyleInterpolator: forFade }}
   />
   

   Stack Navigator exposes various options to configure the transition animation when a screen is added or removed.

   Reference: https://reactnavigation.org/docs/stack-navigator/#animation-related-options