3

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.

Harsha Limaye
  • 915
  • 9
  • 29

1 Answers1

0

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.

Harsha Limaye
  • 915
  • 9
  • 29
  • I am also facing this issue in android devices only but it is fine in iOS. when i am moving from one to another screen in drawer it shows white screen. please help me in this – anshuman burmman Jan 12 '20 at 12:29
  • just go to the home screen by pressing the home button and go back into the expo application , it will work as expected. – Harsha Limaye Jan 13 '20 at 04:47
  • 3
    Thank you for reply. But i got the solution for this i enabled enableScreen() at the top of App.js file i just removed that function and it worked – anshuman burmman Jan 17 '20 at 07:05