add icon to drawer react-navigation v5
23,648
Solution 1
You have to simply add drawerIcon in the options
<Drawer.Navigator>
<Drawer.Screen name="Home" component={Home}
options={{
title: 'Home',
drawerIcon: ({focused, size}) => (
<Ionicons
name="md-home"
size={size}
color={focused ? '#7cc' : '#ccc'}
/>
),
}}
/>
</Drawer.Navigator>
you can also pass color directly like this
...
drawerIcon: ({color, size}) => (
<Ionicons
name="md-home" size={size} color={color}
/>
),
...
here I have used Ionicons for icon, you can use your own icon component or import Ionicons from 'react-native-vector-icons/Ionicons'.
Solution 2
Pass drawerIcon
in your screen's options
:
options={{
title: 'Product',
drawerIcon: ({ focused, size }) => (
<Image
source={require('./images/icons/plumbing-b.png')}
style={[focused ? styles.drawerActive : styles.drawerInActive, { height: size, width: size }]}
/>
}}
https://reactnavigation.org/docs/en/drawer-navigator.html#drawericon
Solution 3
You can add icons to DrawerItem in DrawerContent component.
in App:
function Drawer() {
return (
<Drawer.Navigator
drawerStyle={styles.drawer}
initialRouteName="Home"
drawerPosition='right'
drawerContentOptions={{
activeTintColor: 'white',
inactiveTintColor: 'white',
itemStyle: { alignItems:'flex-end' },
}}
drawerContent={props => <DrawerContent {...props}/>}
>
<Drawer.Screen name="AppTab" component={AppTab1} options={{ headerStyleInterpolator: forFade ,title:"home" ,style={styles.drawerActive}/> }} />
<Drawer.Screen name="News" component={NotificationsScreen} options={{ headerStyleInterpolator: forFade ,title:"new items" style={styles.drawerActive}/> }} />
</Drawer.Navigator>
);
}
in DrawerContent:
<DrawerItem
label='News'
onPress={() =>
props.navigation.navigate('News')}
icon={() =>
<Image
style={styles.icon}
source={require('./images/icons/plumbing-b.png')
/>
}
/>
Comments
-
nfn over 2 years
I'm trying to add an icon to each of the screens in my react-navigation drawer, but the icon doesn't appear.
Here is my code :
function Drawer() { return ( <Drawer.Navigator drawerStyle={styles.drawer} initialRouteName="Home" drawerPosition='right' drawerContentOptions={{ activeTintColor: 'white', inactiveTintColor: 'white', itemStyle: { alignItems:'flex-end' }, }}> <Drawer.Screen name="AppTab" component={AppTab1} options={{ headerStyleInterpolator: forFade ,title:"home" ,icon:<Image source={require('./images/icons/plumbing-b.png')} style={styles.drawerActive}/> }} /> <Drawer.Screen name="News" component={NotificationsScreen} options={{ headerStyleInterpolator: forFade ,title:"new items" icon:<Image source={require('./images/icons/plumbing-b.png')} style={styles.drawerActive}/> }} /> </Drawer.Navigator> ); } export function App() { return ( <NavigationContainer> <Stack.Navigator> <Stack.Screen options={{ headerTitleAlign:"center", headerRight: ({}) => <HeaderRight />, headerLeft: ({}) => <Search /> }} component={Drawer} name="Drawer" /> <Stack.Screen name="Product" component={Product} options={{title:"product"}} /> {/* * Rest Screens */} </Stack.Navigator> </NavigationContainer> ); }
in documentation, adding icon is only mentioned in DrawerItem:
-
Wahdat Jan about 4 yearspass custom component
-
-
Vipul Tyagi over 3 yearsBrother you have pasted same code in both the places.