CODEWITHSUNDEEP
react-nativereact-navigation
Ricardo Sanchez
Ricardo Sanchez

Reputation: 5157

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

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.

enter image description here

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 enter image description here

Upvotes: 7

Views: 9216

Answers (3)

Yaman KATBY
Yaman KATBY

Reputation: 2013

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>

Upvotes: 14

Sadia Chaudhary
Sadia Chaudhary

Reputation: 177

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

Upvotes: 2

Sharif Khan
Sharif Khan

Reputation: 99

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

Upvotes: 2

Related Questions