Add custom icon to drawer navigation

Question

I am trying to add custom icon to my CustomDrawerComponent, but nothing happen...

App.js :

const navigationOptions = {
  headerTintColor: colors.white,
};

const drawerNavigationOption = ({ navigation }) => ({
  ...navigationOptions,
  headerLeft: (
    <TouchableOpacity onPress={() => navigation.toggleDrawer()}>
      <View>
        <Icon name="menu" size={24} color={colors.white} />
      </View>
    </TouchableOpacity>
  ),
});

const MapsStackNavigator = createStackNavigator({
  MapsNavigator: {
    screen: MapsScreen,
    navigationOptions: drawerNavigationOption,
  },
});

const AppDrawerNavigator = createDrawerNavigator(
  {
    Plans: MapsStackNavigator,
  },
  {
    contentComponent: CustomDrawerMenu,
    contentOptions: {
      inactiveTintColor: colors.doveGrey,
      activeTintColor: colors.doveGrey,
    },
  }
);

My CustomDrawerMenu.js :

export default class CustomDrawerMenu extends Component {
  render() {
    return (
      <ScrollView
        contentContainerStyle={{
          flex: 1,
          flexDirection: "column",
          justifyContent: "space-between",
        }}
      >
        <SafeAreaView forceInset={{ top: "always", horizontal: "never" }}>
          {...}
          <DrawerItems {...this.props} />
        </SafeAreaView>
        {...}
      </ScrollView>
    );
  }
}

My MapsScreen :

export default class MapsScreen extends React.Component {
  static navigationOptions = {
    drawerIcon: (
      <Image
        style={{ width: 24, height: 24 }}
        source={require("../../assets/icons/plan.png")}
      />
    ),
    title: "Plans",
  };

  render() {
    return (
      <Text>My map screen</Text>
    );
  }
}

But absolutely nothing happened... I tried to add drawerIcon to my App.js > const navigationOptions but nothing happened aswell.

I do not really know where to place drawerIconm because I search on the doc, on some YouTubes video and when I reproduced the same, it does not work.

Thank you.

Glory

Answer 1

In the new version of react-navigation(5.x)

You have to do :

1-

import { createDrawerNavigator } from '@react-navigation/drawer';
import { NavigationContainer } from '@react-navigation/native';
import Icon from 'react-native-vector-icons/Ionicons';

2- Instead of using createDrawerNavigator you have to use Drawer.Navigator as below :

<NavigationContainer>
    <Drawer.Navigator
        initialRouteName="Products">

        <Drawer.Screen name="Products" component={YOUR COMPONENT OR YOUR STACKNAVIGATOR} options={{
            drawerIcon: config => <Icon
                size={23}
                name={Platform.OS === 'android' ? 'md-list' : 'ios-list'}></Icon>
        }} />

        <Drawer.Screen name="Orders" component={YOUR COMPONENT OR YOUR STACKNAVIGATOR} options={{
            drawerIcon: config => <Icon
                size={23}
                name={Platform.OS === 'android' ? 'md-create' : 'ios-create'}></Icon>
        }} />

    </Drawer.Navigator>
</NavigationContainer>

Cluj

How do you config it to display on the right instead of the left? – Rabat

Answer 2

I finally found the answer myself, you can not add drawerIcon to navigationOptions of the child-screen. You have to do like so :

const AppDrawerNavigator = createDrawerNavigator(
  {
    Home: {
      screen: HomeStackNavigator,
      navigationOptions: {
        drawerIcon: (
          <Image
            style={{ width: 24, height: 24 }}
            source={require("./assets/icons/plan.png")}
          />
        ),
      },
    },

And then in your HomeStack :

const HomeStackNavigator = createStackNavigator({
  HomeNavigator: {
    screen: HomeScreen,
    navigationOptions: drawerNavigationOption,
  },
});

Hope it'll serve to someone !

Glory

Answer 3

 <Stack.Screen name="Feed" component={Feed} options={{ title: 'Feed',
            drawerIcon: ({ focused, size }) => (
                <Image
                  source={require('../../../assets/icons/icon-email.png')}
                  style={[{ height: 20, width: 20 }]}
                /> )       
            }} />

Allimportant

Answer 4

const AppDrawerNavigator = createDrawerNavigator(
 {
     Home: {
       screen: HomeStackNavigator,
       navigationOptions: {
         drawerIcon: (
          <View>
           <Image
             style={{ width: 24, height: 24 }}
             source={require("./assets/icons/plan.png")}
           />
          </View>
         ),
       },
     },

Add before you will get original image style

Dropline

Answer 5

hope this will save someone days..

  import { NavigationContainer } from "@react-navigation/native";
   <NavigationContainer>
      <Drawer /> //import from your folder/file
    </NavigationContainer>

drawer file

   import { createDrawerNavigator } from "@react-navigation/drawer";
   import DrawerContain from "./DrawerContain";
   import StackNavigatore from "./stackNavigatore";
    import ProductHome from "../product/ProductHome";
   import Contact from "./ContactUs";
   import About from "./About";
      import HomeOrder from "./orderStack";
   function DrawerNavigator() {
   return (
   <Drawer.Navigator
    drawerContent={(props) => <DrawerContain {...props} />}
    drawerContentOptions={
    {
      // activeTintColor: "#e91e63",
      // itemStyle: { marginVertical: 5 },
    }
  }
>
  <Drawer.Screen name="Home" component={StackNavigatore} />
  <Drawer.Screen
    name="Order"
    component={HomeOrder}
  />
  <Drawer.Screen name="Contact Us" component={Contact} />
  <Drawer.Screen name="About Us" component={About} show={false} />
</Drawer.Navigator>
  );
}

  export default DrawerNavigator;

drawer container file

  import {
   DrawerContentScrollView,
  DrawerItemList,
  DrawerItem,
 } from "@react-navigation/drawer";
  import { View, StyleSheet } from "react-native";
  import { useNavigation } from "@react-navigation/native";
 import React from "react";
 import Ionicons from "react-native-vector-icons/Ionicons";
 import { Drawer, Text } from "react-native-paper";

    function DrawerContain({ ...props }) {
    //   const navigation = useNavigation();
    const image = require("../../assets/img/rupee.png");
   return (
<>
    <Drawer.Section>
      <DrawerItem
        icon={({ color, size }) => (
          <Ionicons name="home-outline" color={color} size={size} /> <<--- with 
        vectore icon
        )}
        label="Sell prodcuts to customer"
        // onPress={() => props.navigation.navigate('route to screen')}
      />
      <Drawer.Item
        icon={image}   <<---- from local storage
        label="Orders"
        onPress={() => props.navigation.navigate("Order")}
      />
</> 
  )
 }

Shanel

Answer 6

I came across the same issue but none of the above answers suited me. I did find a solution that is easy to implement and works like a charm:

1. The imports:

import "react-native-gesture-handler";
import * as React from "react";
import { NavigationContainer } from "@react-navigation/native";
import { createDrawerNavigator } from "@react-navigation/drawer";
import HeaderLogo from "./components/header";
import Dashboard from "./components/dashboard";
import { StatusBar as CustomStatusBar } from "react-native";
import AntDesign from "react-native-vector-icons/AntDesign";

2. The inits:

const Drawer = createDrawerNavigator();

3. My drawer navigator:

function DrawerNavigator() {
  return (
    <>
      <CustomStatusBar
        animated={true}
        // Native to android
        backgroundColor="#B72E81"
        barStyle={"default"}
        showHideTransition={"slide"}
        hidden={false}
      />
      <Drawer.Navigator
        screenOptions={{ drawerActiveTintColor: "#000", fontWeight: "bold" }}
        initialRouteName="Home"
      >
        <Drawer.Screen
          name="Dashboard"
          component={Dashboard}
          options={{
            headerTitle: () => <HeaderLogo />,
            headerStyle: {
              backgroundColor: "#FEF202",
            },
            headerTitleAlign: "center",
            drawerIcon: () => (
              <AntDesign name="dashboard" size={30} color="black" />
            ),
          }}
        />
      </Drawer.Navigator>
    </>
  );
}

4. Finale:

export default function App() {
  return (
    <NavigationContainer>
      <DrawerNavigator />
    </NavigationContainer>
  );
}

NOTE: I was working on react-native but the icon implementation should be the same and it's upto date. In my example, I do not have customs, everything is per documentation. Edits are welcome, hope it helps a soul.

Federative