Icons from React-native-elements/fontAwesome are not showing

Question

I'm setting up icons for drawer items and for headerLeft.But icons are not apprearing in my android app.I am using react-native-elements library to use icons in my code. icon type is font-awesome. i have mentioned the type of icon specifically.

I have tried all commands like react-native link and linked all libraries successfully but nothing worked.

MainComponent.js

import React, { Component } from 'react';
import Menu from './MenuComponent';
import { View,Platform } from 'react-native';
import Dishdetail  from './DishdetailComponent';
import Home from './HomeComponent';
import { createStackNavigator,createAppContainer} from 'react-navigation'; 
import {createDrawerNavigator} from 'react-navigation'; 
import { Icon } from 'react-native-elements'
import { gestureHandlerRootHOC } from 'react-native-gesture-handler';
import Contact from './ContactusComponent';
import About from './AboutusComponent';


 const MenuNavigator = createStackNavigator({
 Menu: { 
 screen: Menu,
 navigationOptions: ({ navigation }) => ({
   headerLeft: <Icon 
          name='menu' size={24} 
               color="white" 
               type="font-awesome"
               onPress={() => navigation.toggleDrawer()}
              />
  })
 },
 Dishdetail: { 
screen: Dishdetail 
 }
   },
 { 
   initialRouteName: 'Menu',
   navigationOptions: {
  headerStyle: {
      backgroundColor: "#512DA8"
   },
  headerTintColor: '#000',
  headerTitleStyle: {
      color: "#fff"            
  }
 }
    }
);

 const HomeNavigator = createStackNavigator({
   Home: 
   { screen: Home }
    }, {
  navigationOptions: ({ navigation }) => ({
  headerStyle: {
    backgroundColor: "#512DA8"
   },
   headerTitleStyle: {
    color: "#fff"            
   },
   headerTintColor: "#fff" ,
   headerLeft: <Icon name='menu' size={24} 
               color="white" 
               type="font-awesome"
               onPress={() => navigation.toggleDrawer()}
              /> 
    })
   });

  const ContactNavigator = createStackNavigator({
   Contact: {
screen: Contact
 }
  }, {
   navigationOptions: ({ navigation }) => ({
   headerStyle: {
  backgroundColor: '#512DA8'
  },
   headerTitleStyle: {
  color: '#fff'
  },
   headerTintColor: '#fff',
     headerLeft: <Icon name='menu' size={24} 
               color="white" 
               type="font-awesome"
               onPress={() => navigation.toggleDrawer()}
              />
 })
    } );

const AboutNavigator = createStackNavigator({
About: {
screen: About
 }
  }, {
  navigationOptions: ({ navigation }) => ({
  headerStyle: {
  backgroundColor: '#512DA8'
},
headerTitleStyle: {
  color: '#fff'
},
headerTintColor: '#fff',
headerLeft: <Icon name='menu' size={24} 
               color="white" 
               type="font-awesome"
               onPress={() => navigation.toggleDrawer()}
              />
   })
   });

 const MainNavigator = createDrawerNavigator({
  Home: 
{ 
  screen: HomeNavigator,
  defaultNavigationOptions:  {
    title: 'Home',
    drawerLabel: 'Home',
    drawerIcon: ({tintColor} )=> (
        <Icon 
        name='home'
        type="font-awesome"
        size= {24}
        color={tintColor}   />
    )
  }
},
  Menu: 
  { screen: MenuNavigator,
   defaultNavigationOptions: {
    title: 'Menu',
    drawerLabel: 'Menu',
    drawerIcon: ({'#000'} )=> (
        <Icon 
        name='list'
        type="font-awesome"
        size= {24}
        color={'#000'}   />
    )
  }, 
 },
     Contact:
   {
  screen: ContactNavigator,
  defaultNavigationOptions: {
    title: 'Contact us',
    drawerLabel: 'Contact Us',
    drawerIcon: ({tintColor} )=> (
        <Icon 
        name='address-card'
        type="font-awesome"
        size= {22}
        color={tintColor}   />
    )
  }
    },
   About:
     {
  screen: AboutNavigator,
  defaultNavigationOptions: {
    title: 'About Us',
    drawerLabel: 'About',
    drawerIcon: ({tintColor} )=> (
        <Icon 
        name='info-circle'
        type="font-awesome"
        size= {24}
        color={tintColor}   />
    )
  }
}
   }, {
     drawerBackgroundColor: '#D1C4E9',
     drawerPosition: "left"
   });

class Main extends Component {


 render() {

   return (

    <View style={{flex:1 }}>
        <MainNavigator />
    </View>

);
  }
 }


 const App=createAppContainer(MainNavigator);


export default App;

package.json

   "dependencies": {
    "feather-icons-react": "^0.3.0",
    "react": "16.6.3",
     "react-native": "0.57.8",
     "react-native-elements": "^1.0.0-beta7",
     "react-native-gesture-handler": "^1.0.12",
     "react-native-vector-icons": "^4.6.0",
      "react-navigation": "^3.0.9"
      },

I wished to appear icons but doesn't appear at all.

Solution 1

Check here: https://fontawesome.com/start

Add https://use.fontawesome.com/releases/v5.6.3/css/all.css in your index.html.

Check here as well https://fontawesome.com/how-to-use/on-the-web/setup/upgrading-from-version-4

Solution 2

Here is one way to do it and this is working as of 01/20/2020.

Assuming you already have react-native-elements installed if not yarn add react-native-elements

import { Icon } from 'react-native-elements';
.
.
.

// Drawer Navigator
const DrawerNavigator = createDrawerNavigator({
  Home: {
    screen: HomeScreen,
    navigationOptions: {
      drawerIcon: (
        <Icon
          reverseColor
          name='home'
          type='font-awesome'
          size={26}
        />
      ),
    },
  }
});

Solution 3

It's because there's no icon named "menu" in font-awesome.

you can check the icons in https://oblador.github.io/react-native-vector-icons/