How to change the menu icon color of the react native Drawer.Navigator?

Question

I am building a react-native app. I am using this drawer navigator (https://reactnavigation.org/docs/drawer-navigator/) component. It is clear how to change the text of the header part, but it is not clear how to change the color of the header icon. Currently my code looks like this.

  <Drawer.Navigator
    initialRouteName="Calendar"
    screenOptions={{
      drawerStyle: {
        width: 240
      },
      headerTintColor: {color: KbStyles.white},
      headerStyle: {
        height: 80,
        backgroundColor: KbStyles.green
      },

      headerTitleStyle: {
        color: KbStyles.white
      },
      drawerActiveBackgroundColor : KbStyles.lightRed,
      drawerActiveTintColor: "white"
    }}

This code successfully changes the color of the text but it does not change the header icon. It looks like this:

How do I change the color of that menu icon to white?

Answer 1

You have to use header options like this to change header title or icon color

screenOptions={{
    headerTintColor: KbStyles.white,
    headerStyle: {
      backgroundColor: KbStyles.green
    }
}}

Also you can create your own left(button) component:

headerLeft: (props) => {
   const {tintColor, pressColor, pressOpacity, labelVisible} = props;
   return <MyHeaderLeft {...props} />
}

Or if you want to create your own customized header and want to use it with navigation then try this -

import { getHeaderTitle } from '@react-navigation/elements';

screenOptions={{
  headerStyle: {
    backgroundColor: KbStyles.green,
    //...other styles
  },
  header: ({ navigation, route, options }) => {
    const title = getHeaderTitle(options, route.name);
    return (
       <AppHeader //my custom header
         title={title}
         menu
         onPressMenu={() => navigation.toggleDrawer()}
         style={options.headerStyle}
       />
    );
  },
}}