Search code examples
react-nativereact-navigationreact-navigation-stackreact-navigation-drawer

Why do I get a blank screen after using Drawer-Navigator in React-Native to navigate to another Navigator?


Edit Snack: https://snack.expo.io/rJfyQLhJ8
I am learning react native using some course material which is pretty outdated. There have been some breaking changes and I am trying to figure things out. This is my Main Component with a few navigators.
MenuNavigator:

const MenuNavigator = createStackNavigator(
{
    Menu: { screen: Menu },
    Dishdetail: { screen: Dishdetail }
},
{
    initialRouteName: 'Menu',
    defaultNavigationOptions: {
        flex: 1,
        headerStyle: {
            backgroundColor: '#512DA8',
        },
        headerTintColor: '#fff',
        headerTitleStyle: {
            color: '#fff'
        }
    }
})  

Home Navigator

const HomeNavigator = createStackNavigator(
{
    Home: { screen: Home }
},
{
    defaultNavigationOptions: {
        headerStyle: {
            backgroundColor: '#512DA8',
        },
        headerTintColor: '#fff',
        headerTitleStyle: {
            color: '#fff'
        }
    }
})  

And finally here is the MainNavigator

const MainNavigator = createDrawerNavigator(
{
    Home:
    {
        screen: HomeNavigator,
        navigationOptions: {
            title: 'Home',
            drawerLabel: 'Home'
        }
    },
    Menu:
    {
        screen: MenuNavigator,
        navigationOptions: {
            title: 'Menu',
            drawerLabel: 'Menu'
        },
    }
},
{
    drawerBackgroundColor: '#D1C4E9'
});  

After this, I wrap it in the createAppContainer and use it in the render method.

const App = createAppContainer(MainNavigator);
class Main extends Component { 
render() {
    return (
        <View style={{ flex: 1, paddingTop: Platform.OS === 'ios' ? 0 : Expo.Constants.statusBarHeight }}>
            <App />
        </View>
    );
}}

The app builds successfully and I am able to access the side drawer but when i click on the Menu item, it navigates without throwing an error but shows a blank white screen. If i navigate back to the home screen it will display it properly but it will show a blank screen in place of the Menu screen/component. Why is this ? I am using a OnePlus5t.


Solution

  • It might be a bug. It works after you navigate to the home screen using the android home UI button and back into the application. Seems to work fine from then onwards.