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

Fixed it by using the DarkTheme for the Navigation Container

import { NavigationContainer, DarkTheme } from '@react-navigation/native';

return (
    <NavigationContainer theme={DarkTheme}>
       {children}
    </NavigationContainer>

I am also using StackNavigator in v5, but none of the answers worked for me. That's how I solved the issue:

const navigatorOptions = {
  headerShown: false,
  cardStyle: { backgroundColor: 'transparent' },
  cardStyleInterpolator: ({ current: { progress } }) => ({
    cardStyle: {
      opacity: progress.interpolate({
        inputRange: [0, 1],
        outputRange: [0, 1],
      }),
    },
    overlayStyle: {
      opacity: progress.interpolate({
        inputRange: [0, 1],
        outputRange: [0, 0.5],
        extrapolate: 'clamp',
      }),
    },
  }),
}
 
...

<AppStack.Navigator
  screenOptions={navigatorOptions}
  mode="modal"
>
...

I've found the solution here: https://reactnavigation.org/docs/stack-navigator#transparent-modals

An easy fix to this problem that worked for me is to set the sceneContainerStyle in the Tab Navigator like this:

<Tab.Navigator sceneContainerStyle={{backgroundColor: 'black'}}>
...//your screens here
</Tab.Navigator>

const App = () => (
  <View style={styles.appStyle}>
     <Navigation />
  </View>
);

const styles = StyleSheet.create({
  appStyle: { flex: 1, backgroundColor: "#000" }
});