Add custom icon to drawer navigation - react-native

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.

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>

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 !

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

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

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