React Native Vector Icons Display as X After Linking

Question

I installed React Native vector icons with the command:

npm install react-native-vector-icons --save

which results in this:

-- [email protected]
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^2.1.2 (node_modules\jest-haste-map\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.2.7 (node_modules\metro\node_modules\jest-haste-map\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.2.7 (node_modules\metro-core\node_modules\jest-haste-map\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN [email protected] requires a peer of canvas@^2.5.0 but none was installed.
npm WARN [email protected] requires a peer of bufferutil@^4.0.1 but none was installed.
npm WARN [email protected] requires a peer of utf-8-validate@^5.0.2 but none was installed.
npm WARN [email protected] requires a peer of bufferutil@^4.0.1 but none was installed.
npm WARN [email protected] requires a peer of utf-8-validate@^5.0.2 but none was installed.
npm WARN [email protected] requires a peer of typescript@>=2.8.0 || >= 3.2.0-dev || >= 3.3.0-dev || >= 3.4.0-dev || >= 3.5.0-dev || >= 3.6.0-dev || >= 3.6.0-beta || >= 3.7.0-dev || >= 3.7.0-beta but none was installed.
npm WARN [email protected] requires a peer of react@^17.0.0 but none was installed.

I then linked the icons with the command:

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

which resulted in this:

warn Calling react-native link [packageName] is deprecated in favor of autolinking. It will be removed in the next major release.
Autolinking documentation: https://github.com/react-native-community/cli/blob/master/docs/autolinking.md
info iOS module "react-native-vector-icons" is already linked
info Linking "react-native-vector-icons" Android dependency
info Android module "react-native-vector-icons" has been successfully linked
info Linking assets to ios project
info Linking assets to android project
success Assets have been successfully linked to your project

Inside App.js, I then import the Icon as displayed on the react-native vector-icons GitHub example like this:

import Icon from 'react-native-vector-icons/FontAwesome';

and then insert it into a View tag like this:

<View>
    <Icon name="rocket" size={30} color="#900" />
</View>

But the icon that is displayed is a box with an X in it. Like this:

I don't understand what is going on since both the download and the linking process seemed to work fine? I have tried to use some other Icons to test it out and they all have the X. There are no errors in the CLI or the app.

I also tried to look at a similar post, but had no luck as I followed the steps as directed and I still have the X.

Any help is appreciated. I am new to React Native - Thanks

Answer 1

Please check in your android/app/build.gradle ( NOT android/build.gradle ) and add the following line:

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

Then rebuild and try android app

For reference follow android installation guide https://github.com/oblador/react-native-vector-icons#examples