Search code examples
react-nativenavigation-drawerreact-navigationreact-navigation-drawer

Icons not shown in React Navigation DrwaerNavigator


I'm trying to add icons to the below simple React Navigation DrawerNavigator:

  export default createAppContainer(createDrawerNavigator({
  Home: {
    screen: HomeScreen,
    icon: 'home'
  },
  Screen1: {
    screen: Screen1
  },
  Screen2: {
    screen: Screen2
  },
  Screen3: {
    screen: Screen3
  },
}));

The drawer is shown fine but icon isn't.


Solution

  • Make sure you have imported react native vector icons to use icons in your Any Component.

     import Ionicons from 'react-native-vector-icons/Ionicons';
        export default createAppContainer(createDrawerNavigator({
        Home: {
        screen: HomeScreen,
        navigationOptions: {
          drawerIcon: () => <Ionicons name="ios-home" size={30} style={{ width: 24 }} 
        color="#000" />
        }
        },
        Screen1: {
        screen: Screen1
        },
        Screen2: {
        screen: Screen2
        },
          Screen3: {
        screen: Screen3
          },
        }));