Add custom icon to drawer navigation
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 !
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>