React-navigation 5 - Drawer Navigator: Change style of Drawer's menu icon

Question

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?

Answer 1

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>
    );
}