React Navigation 5.x stack navigation show blank screen

Question

//app.js "react": "16.9.0","react-native": "0.61.5", offic follow the official document but show blank screen react native

import React from 'react';
import { SafeAreaView, StatusBar, View, Text } from 'react-native';
import { Provider } from 'react-redux';
import configureStore from './App/redux/store/store'
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import AppSplashScreen from './App/screens/splashScreen/SplashScreen';
const Stack = createStackNavigator();


function MyStack() {
 return (
        <Stack.Navigator>
          <Stack.Screen name="Home" component={AppSplashScreen} />
        </Stack.Navigator>
 );
}

export default class App extends React.Component {
   constructor(props) {
     super(props)
     this.state = {}
   }

   render() {
        return (
                <>
                <StatusBar barStyle="dark-content" />
                  <SafeAreaView  >
                    <Provider store={configureStore()} >
                      <NavigationContainer>
                        <MyStack />
                      </NavigationContainer>
                    </Provider>
                 </SafeAreaView>
                </>
               );
             }

           };

but replace MyStack to AppSplashScreen then show SplashScreen

Answer 1

Solved by adding style={{flex: 1}} to the SafeAreaView.

    const App = () => {   
        return (
           <SafeAreaView style={{flex: 1}}>
             <NavigationContainer>
               <Stack.Navigator initialRouteName="Home">
                 <Stack.Screen
                  name="Home"
                  component={HomeScreen}
                  options={{title: 'Overview'}}
                 />
               </Stack.Navigator>
             </NavigationContainer>
          </SafeAreaView>   
    )};