react-nativereact-navigationreact-navigation-drawerreact-navigation-v5

add icon to drawer react-navigation v5


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:

https://reactnavigation.org/docs/en/drawer-navigator.html


Solution

  • 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'.