React native MaterialCommunityIcons 在 Top Tab Navigator Version 5 中不起作用

Question

The Top tab navigation work but Icons are not showing only the name of the screen is showing here I am using react-navigation Version 5, if not materialcommunityicons other alternatives which can be used in top bar navigation and how to use that.

import React from 'react';
import {Text, View} from 'react-native';
import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
import {MaterialCommunityIcons} from 'react-native-vector-icons/MaterialCommunityIcons'

const tab = createMaterialTopTabNavigator();

function DetailsScreen() {
return (
  <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
    <Text>Details</Text>
  </View>
);
}

function SettingScreen() {
return (
  <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
    <Text>Syllabus!</Text>
  </View>
);
}

 function ProfileScreen() {
  return (
  <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
    <Text>Awards!</Text>
  </View>
);
}
const Mytabs = () =>{
 return(
 <tab.Navigator initialRouteName="home">
    <tab.Screen options={{
      tabBarLabel: 'Home',
      tabBarIcon: () => (
        <MaterialCommunityIcons name="home" />
      ),
    }}name="Home" component={DetailsScreen}  />
    <tab.Screen name="Settings" component={SettingScreen} />
    <tab.Screen name="Profile" component={ProfileScreen} />
    
    
  </tab.Navigator>
  
   );
   }
export default Mytabs;

Answer 1

first install and then please run this command:

react-native link react-native-vector-icons

Answer 2

Open android/app/build.gradle and add the following:

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