react native vector icons showing X instead of icon

I cant seem to figure this out. I can get something to show, but its a box with an X in it, so im assuming its not picking up the vector icons. Any advice?

I have the show icon true, I have the tint color, I have the vector icons (i have tried both ionicons and font awesome, to no avail.

Code:

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

class HomeScreen extends Component {

    static navigationOptions = {
        title: 'Home'
    };

 render(){
     return (
         <View style={{ flex:1, alignItems:'center', justifyContent:'center' 
         }}>
             <Text>Home Screen</Text>
         </View>
     );
  }
  }

  const RootStack = createBottomTabNavigator(
      {
          Home: {
              screen: HomeScreen,
              navigationOptions: {
              tabBarLabel: 'Home',
              tabBarIcon: ({ tintColor }) => (
                  <Icon name = 'home' size={25} color={tintColor} />
              )
          }
      },
   },

   {
        tabBarOptions: {
        showIcon:true,
        tintColor:'red'
   }
  }
  );

  const AppContainer = createAppContainer(RootStack);

  const styles = StyleSheet.create({

 })

export default class App extends Component{
   render(){
   return <AppContainer />;
   }
}

Solution

Solution:

Open your android/app/build.gradle file.
Add the following line inside the android block:

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

Your android block should look something like this:

    android {
    compileSdkVersion rootProject.ext.compileSdkVersion

    defaultConfig {
        applicationId "com.yourapp"
        minSdkVersion rootProject.ext.minSdkVersion
        targetSdkVersion rootProject.ext.targetSdkVersion
        versionCode 1
        versionName "1.0"
        // ...
    }
    // ...
}
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

Save and close the android/app/build.gradle file.
Open your terminal.
Run the following command to link the vector icons package:

    npx react-native link react-native-vector-icons

After linking the package, run the app on Android:

    npx react-native run-android

It worked for me, so I hope that if you follow this approach, it will work well for you as well.

Source: https://samtapes.medium.com/solve-icons-not-showing-up-react-native-vector-icons-78c312fcf692