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

Time:01-20

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

CodePudding user response:

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>
  •  Tags:  
  • Related