React-navigation default drawer icon, how to change it?

Question

How can I change the icon point in the image below? I have not been able to find the documentation in the docs, I would like to change it to a different icon but I have no idea how to do this.

I found documentation about drawerIcon but as far as I know and manage to implement that icon is for the menu items in the drawer it self not for the screen header.

Here is my code:

const Drawer = createDrawerNavigator(); const headerOptions = { title: 'Task List', drawerIcon: ({ focused, size, color }) => <Ionicons name="ios-pizza" color="red" size={24} />, }; const HomeScreen = ({ navigation }, props) => { return ( <Drawer.Navigator screenOptions={{ drawerType: 'front' }}> <Drawer.Screen name="TaskList" component={TaskListScreen} options={headerOptions} /> <Drawer.Screen name="TaskView" component={TaskViewScreen} /> <Drawer.Screen name="Notifications" component={Notifications} /> <Drawer.Screen name="Login" component={LoginScreen} /> </Drawer.Navigator> ); };

But as mention before it renders the icons in the drawer item as shown below

Yaman · Accepted Answer · 2023-07-13 10:52:02Z

15

headerLeft: Function which returns a React Element to display on the left side of the header. You can use it to implement your custom left button, for example:

<Drawer.Navigator screenOptions={({ navigation }) => ({ headerLeft: props => <IconComponent onPress={navigation.toggleDrawer} />, })} > ... </Drawer.Navigator>

edited Jul 13, 2023 at 10:52

answered Jan 18, 2022 at 16:01

Yaman

2,08314 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Yaman Over a year ago

Please remove the (Untested) flag if this did work for you

Ricardo Sanchez Over a year ago

I found about headerLeft in an example code from their documentation, the problem with this approach is that I have to do the same for every drawer navigator item, I wonder if there is a global solution?

Yaman Over a year ago

The code I included in the answer above is a global solution

Ricardo Sanchez Over a year ago

You are correct, I was applying the options to the Screen rather than the Navigation, my bad and thank you

Yaman Over a year ago

If the above code works fine, please remove the untested flag (or tell me to remove it). Also, you can click the checkmark (✓) to accept it. That way others know that you've been (sufficiently) helped.

Sharif Khan · Accepted Answer · 2022-08-09 04:23:16Z

you can also use a image as a drawer icon.

screenOptions={({ navigation }) => ({ headerLeft: () => <Pressable onPress={navigation.toggleDrawer}> <Text> <Avatar.Image size={32} source={{ uri: deafaultImage }} /> </Text> </Pressable > })}

Sadia Chaudhary · Accepted Answer · 2022-10-26 10:34:25Z

<Drawer.Navigator screenOptions={{ headerTintColor: 'red', // -----> by changing color from here }} drawerContent={props => <DrawerContent {...props} />} > <Drawer.Screen /> </Drawer.Navigator >

Collectives™ on Stack Overflow

React-navigation default drawer icon, how to change it?

3 Answers 3

5 Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Related