CODEWITHSUNDEEP
reactjsreact-nativenavigation-drawerreact-navigation
roz333
roz333

Reputation: 715

How to add Icons to navigation drawer

I know how to add Icons to a custom drawer navigation, I wonder if there is any way to add icons directly to </Drawer.Navigator> or <Drawer.Screen/>?

For example this is my code:

const MyDrawer=()=>{

const Drawer=createDrawerNavigator();

return(

<NavigationContainer>
  <Drawer.Navigator
  initialRouteName='Main Page'
  >

<Drawer.Screen  name='Main Page' component={MainFunc} />


</Drawer.Navigator>

</NavigationContainer>
)

Upvotes: 1

Views: 6002

Answers (2)

Antony Kavoo
Antony Kavoo

Reputation: 156

As per the code in question, you should have:

import AntDesign from "react-native-vector-icons/AntDesign";

const MyDrawer=()=>{

const Drawer=createDrawerNavigator();

return(

<NavigationContainer>
  <Drawer.Navigator
  initialRouteName='Main Page'
  >
    <Drawer.Screen
      name="Main Page"
      component={MainFunc}
      options={{
        drawerIcon: () => (
          <AntDesign name="dashboard" size={30} color="black" />
        ),
      }}
    />
  </Drawer.Navigator>
</NavigationContainer>
)

NOTE: The drawer.screen options prop and drawerIcon implementation and the icon import as well.

Here's a link to a more elaborate example: An answer to a similar question

Upvotes: 0

rajan tank
rajan tank

Reputation: 247

For add, a custom icon to an item, create one function to display a list of drawer item

like this 

function CustomDrawerContent(props) {
  return (
    <DrawerContentScrollView {...props}>
      <DrawerItemList {...props} />
      <DrawerItem
      icon={({ focused, color, size }) => <Icon color={color} size={size} name={focused ? 'heart' : 'heart-outline'} /> )}
      label="Help"
       onPress={() => alert('Link to help')} />
    </DrawerContentScrollView>
  );
}

<DrawerItem> has different properties like label, icon, onPress etc you can

so final code be 

const MyDrawer=()=>{

const Drawer=createDrawerNavigator();

return(

<NavigationContainer>
      <Drawer.Navigator
      initialRouteName='Main Page'
      drawerContent={props => CustomDrawerContent(props)}
      >
        <Drawer.Screen  name='Main Page' component={MainFunc} />
    </Drawer.Navigator>
</NavigationContainer>
)



function CustomDrawerContent(props) {
  return (
    <DrawerContentScrollView {...props}>
      <DrawerItemList {...props} />
      <DrawerItem
      icon={({ focused, color, size }) => <Icon color={color} size={size} name={focused ? 'heart' : 'heart-outline'} /> )}
      label="Help"
       onPress={() => alert('Link to help')} />
    </DrawerContentScrollView>
  );
}

you can visit here more info

Upvotes: 7

Related Questions