4

I am using Drawer Navigator from React-navigation 5. I need to change menu (drawer's default) icon color to white.

I could not find any props for that or may be I missed it. Could anyone please help with this?

enter image description here

newdeveloper
  • 1,401
  • 3
  • 17
  • 43
  • Could you check if you're using a custom component for the header? The Drawer navigator shouldn't come with an icon as far as I know. – bjjeong Sep 21 '20 at 15:24

2 Answers2

9

This worked for me (using "@react-navigation/drawer": "^6.1.4"):

  <Drawer.Navigator
    screenOptions={{headerTintColor: '#FFFFFF'}}
  >
Murilo de Lima
  • 91
  • 1
  • 1
  • 1
    Wondering how to do this dynamically using useColorScheme so switches to darkmode/lightmode based on users setting? – 128KB Feb 20 '23 at 21:37
4

This is how I would go about this.

const NavigationDrawerStructure = (props) => {
    const toggleDrawer = () => {
        props.navigationProps.toggleDrawer();
    };

    return (
        <TouchableOpacity onPress={() => toggleDrawer()}>
            <HamburgerIcon />
        </TouchableOpacity>
    );
};

function firstScreenStack({ navigation }) {
    return (
        <Stack.Navigator initialRouteName="FirstPage">
            <Stack.Screen
                name="FirstPage"
                component={FirstPage}
                options={{
                    title: 'First Page', //Set Header Title
                    headerLeft: () => <NavigationDrawerStructure navigationProps={navigation} />,
                    headerStyle: {
                        backgroundColor: '#f4511e', //Set Header color
                    },
                    headerTintColor: '#fff', //Set Header text color
                    headerTitleStyle: {
                        fontWeight: 'bold', //Set Header text style
                    },
                }}
            />
        </Stack.Navigator>
    );
}
bjjeong
  • 206
  • 1
  • 7