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

user_659149 0
Viewed 1526

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

react-navigation react-native
2 Answers

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>
user_102781500

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