Icons not showing in createBottomTabNavigator in react native

Question

Icons not showing in createBottomTabNavigator in react native. I guess icons are not rendering. I tried the following code. Getting the following result after executing the code. Try to use the https://oblador.github.io/react-native-vector-icons icons in the code but none of the icons is set properly.

import React from 'react';
import { Text, View } from 'react-native';
import { createBottomTabNavigator, createAppContainer } from 'react-navigation';
import Icon from 'react-native-vector-icons/Ionicons';

class HomeScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Home!</Text>
      </View>
    );
  }
}

const TabNavigator = createBottomTabNavigator({
  Home: {
    screen:HomeScreen,
    navigationOptions: {
      tabBarIcon: ({ focused, tintColor })=> <Icon name="ios-mail" color={tintColor} size={14}/>
    },
  },
  tabBarOptions: { 
    showLabel: false,
    activeTintColor: '#0a0a0a',
    style: {
      backgroundColor: '#f7f7f7',
      height: 30,
      borderTopWidth: 1,
      borderTopColor: 'red'
    }          
  }
});

export default createAppContainer(TabNavigator);

Answer 1

run this command again yarn react-native run-android

This works fine with my project

Answer 2

Open your_react_native_project->android -> app -> build.gradle file and put below code of at the end of the file.

apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

And put the below code inside the dependency block.

implementation project(':react-native-vector-icons')

This works fine with my project.