React-Navigate Drawer not Highlighting Labels

Question

I am working on a React-Native project (school) and I am having a problem that I cannot find a solution to. I am using the drawer navigator element and everything works except that the second element, "About" doesn't highlight and close the drawer. I have looked but cannot seem to determine any difference between this element and others. Unfortunately, my work on this has been copied and pasted without much comprehension of the mechanics behind why I am doing what I am doing (course is online, and a lot of "do this to get this" type of teaching).

Here is my page code. Please let me know what I am missing and preferably why it doesn't work.

import React, { Component } from 'react';
import Menu from './MenuComponent';
import Home from './HomeComponent';
import Contact from './ContactComponent';
import About from './AboutComponent';
import Dishdetail from './DishdetailComponent';
import { View, Platform } from 'react-native';
import { createStackNavigator, createDrawerNavigator } from 'react-navigation';

const MenuNavigator = createStackNavigator({
    Menu: { screen: Menu },
    Dishdetail: { screen: Dishdetail },
    Contact: { screen: Contact },
    About: { screen: About }
}, {
    initialRouteName: 'Menu',
    navigationOptions: {
        headerStyle: {
            backgroundColor: '#512DA8'
        },
        headerTintColor: '#fff',
        headerTitleStyle: {
            color: '#fff'
        }
    }
});

const HomeNavigator = createStackNavigator({
    Home: { screen: Home },
    Dishdetail: { screen: Dishdetail },
    Contact: { screen: Contact },
    About: { screen: About }
}, {
    navigationOptions: {
        headerStyle: {
            backgroundColor: '#512DA8'
        },
        headerTintColor: '#fff',
        headerTitleStyle: {
            color: '#fff'
        }
    }
});

const AboutNavigator = createStackNavigator({
    Home: { screen: Home },
    Dishdetail: { screen: Dishdetail },
    Contact: { screen: Contact },
    About: { screen: About }
}, {
    navigationOptions: {
        headerStyle: {
            backgroundColor: '#512DA8'
        },
        headerTintColor: '#fff',
        headerTitleStyle: {
            color: '#fff'
        }
    }
});

const ContactNavigator = createStackNavigator({
    Home: { screen: Home },
    Dishdetail: { screen: Dishdetail },
    Contact: { screen: Contact },
    About: { screen: About }
}, {
    navigationOptions: {
        headerStyle: {
            backgroundColor: '#512DA8'
        },
        headerTintColor: '#fff',
        headerTitleStyle: {
            color: '#fff'
        }
    }
});

const MainNavigator = createDrawerNavigator({
    Home: {
        screen: HomeNavigator,
        navigationOptions: {
            title: 'Home',
            drawerLabel: 'Home'
        }
    },
    About:
    {
        screen: AboutNavigator,
        navigationOptions: {
            title: 'About Us',
            drawerLabel: 'About Us'
        }
    },
    Menu:
    {
        screen: MenuNavigator,
        navigationOptions: {
            title: 'Menu',
            drawerLabel: 'Menu'
        }
    },
    ContactUs: {
        screen: ContactNavigator,
        navigationOptions: {
            title: 'Contact Us',
            drawerLabel: 'Contact Us'
        }
    }
}, {
    drawerBackgroundColor: '#D1C4E9'
});

class Main extends Component {

    render() {
        return (
            <View style={{ flex: 1, paddingTop: Platform.OS === 'ios' ? 0 : Expo.Constants.statusBarHeight }}>
                <MainNavigator />
            </View>
        )
    }
}

export default Main;

Answer 1

May be the problem could be with you using

    Home: { screen: Home },
    Dishdetail: { screen: Dishdetail },
    Contact: { screen: Contact },
    About: { screen: About }

in all the Navigators, What you need is the appropriate screen. At each as you are displaying each screen there. Meaning, you would have

        Menu: { screen: Menu },
        Dishdetail: { screen: Dishdetail },

only in the MenuNavigator and just Home: { screen: Home }, and so on. You should start there. That being said your way might work but it's unnecessary.