Home » Android » javascript – React Navigation 5.x stack navigation show blank screen-Exceptionshub

javascript – React Navigation 5.x stack navigation show blank screen-Exceptionshub

Posted by: admin February 26, 2020 Leave a comment

Questions:

//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

How to&Answers:

This should work fine, try not to separate the Stack.Navigator from the navigation container

this works for me

function App() {
  return (
    <Provider store={store}>
      <NavigationContainer>
        <Stack.Navigator initialRouteName="Home">
          <Stack.Screen name="Home" component={Homepage} />
          <Stack.Screen name="Notes" component={Notes} />
        </Stack.Navigator>
     </NavigationContainer>
   </Provider>
 );
}

export default App;