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