CODEWITHSUNDEEP
react-nativereact-navigation-drawer
newdeveloper
newdeveloper

Reputation: 1451

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

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

Upvotes: 4

Views: 4752

Answers (2)

Murilo de Lima
Murilo de Lima

Reputation: 91

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

  <Drawer.Navigator
    screenOptions={{headerTintColor: '#FFFFFF'}}
  >

Upvotes: 9

bjjeong
bjjeong

Reputation: 206

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

Upvotes: 4

Related Questions