I'm trying to add an icon to each of the screens in my react-navigation drawer but the icon doasn'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:
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'.