React-native-vector-icons: Icon not not loaded on Android App

[RajuPilani]

  "dependencies": {
    "@remobile/react-native-splashscreen": "^1.0.3",
    "alt": "^0.18.4",
    "native-base": "^0.3.1",
    "react": "^0.14.8",
    "react-native": "^0.25.1",
    "react-native-action-button": "^1.1.5",
    "react-native-android-statusbar": "^0.1.2",
    "react-native-icons": "^0.7.1",
    "react-native-material-design": "https://github.com/react-native-material-design/react-native-material-design-styles.git",
    "react-native-material-design-styles": "^0.2.6",
    "react-native-navigation-bar": "^0.1.10",
    "react-native-scrollable-tab-view": "^0.4.3",
    "react-native-vector-icons": "^2.0.3"
  },

[281330]

you have to rnpm link (that will link all dependencies, including this library)

otherwise if you only want a particular one, you can rnpm link <name>

[RajuPilani]

@281330 thanks

[rgoldiez]

I'm having this issue as well. RN 0.28, and react-native-vector-icons 2.0.1

Workings on iOS. I ran rnpm link and get the following output but I still get the X like the OP. Screenshot below.

$ rnpm link react-native-vector-icons
rnpm-link info Android module react-native-vector-icons is already linked 
rnpm-link info Linking react-native-vector-icons ios dependency 
rnpm-link info iOS module react-native-vector-icons has been successfully linked 
rnpm-link info Linking assets to ios project 
rnpm-link WARN ERRGROUP Group 'Resources' does not exist in your XCode project. We have created it automatically for you.
rnpm-link info Linking assets to android project 
rnpm-link info Assets has been successfully linked to your project 

[rgoldiez]

I also tried the troubleshooting instructions below to no avail...

[s2t2]

I'm using this library on android through native-base. Initially, icons were displaying properly. Then all of a sudden they stopped displaying properly, perhaps because I renamed one of the font files.

I've attempted to fix this issue by removing the android/app/src/main/assets/fonts and android/app/build directories, and uninstalling and re-installing both native-base and this library. But the icons are still not displaying properly.

Please advise. Are there other ways to troubleshoot? Is there an asset cache somewhere that needs to be cleared? FYI - I'm using Android Studio. Thank you for your time.

[s2t2]

Update: I thought the problem only applied to my project's directories, so I created an entirely new react-native application from scratch, created a new Android Virtual Device, and installed native-base and peer dependencies, but the icons are still not displaying properly.

I'm confused by this result. Please advise.

[oblador]

Renaming font files will break stuff (if not done carefully on ios and always on android). Since I'm not a maintainer of rnpm/native-base I cannot support nor debug it, I suggest using the manual integration instead if it's giving you troubles. If you're still unsuccessful, please post a minimal instructions to reproduce it or post a ticket with rnpm/native-base.

[s2t2]

Thanks @oblador for information about your experience with renaming font files and your suggestion to try installing the fonts using a different methodology besides rnpm.

I tried the manual strategy and it works. :-)

In case anyone is interested, full reproduction instructions are here.

[rgoldiez]

@s2t2 - I noticed in the link you provide that you did not put apply from: "../../node_modules/react-native-vector-icons/fonts.gradle" in your android/app/build.gradle

I am a complete noob when it comes to Android.... so not sure if that's required or not. Either way (with our without the apply) it's still not working for me.

[oblador]

@rgoldiez: that's only required when going the gradle script approach. Marked that as the recommended way for android now.

[rgoldiez]

@oblador - I'm a little stuck on the android side (no issue w/ iOS, been using this repo for months w/ iOS)... I've pasted my directory structure, build.gradle, settings.gradle, and MainActivity.java just below. Does anything stand out? I'm bringing in the fonts this way: var FontAwesome = require('react-native-vector-icons/FontAwesome');

[rgoldiez]

Somehow, someway, doing react-native run-android made the icons work!? I had been running from Android Studio.

[sourabhdattawad]

Even I faced the same issue. I tried restarting whole application and it worked.
Try:
react-native run-android This will actually download some packages for react-native-vector-icons while building up, then npm start .

[mahendra13]

Thanks @oblador

[wrongakram]

If the project is already open in android studio emulator and you imported the ICONS, then you will have to close the app and re-run react-native run-android for your icons to be displayed.

[wikieswan]

another way:
if you ues android studio, do copy fonts to android/app/assets install of android/app/src/main/assets.
link
post

[anvt96]

I am using FontAwesome, but Android still have [X] Icon. I import FontAwesome, { Icons } from 'react-native-fontawesome'; and my code is , but not working. Give me the way to troubleshoot :((

[mdforhadsarker]

It worked this way -

1. _android/build.gradle_
   Under
   allprojects { repositories { }
   Put

subprojects { if (project.name.contains('react-native-vector-icons')) { buildscript { repositories { maven { url "https://dl.bintray.com/android/android-tools/" } jcenter() } } } }

1. In your project directory run react-native link
   Then go to your Android Studio , close your project and emulator . Open the project again to sync the gradle .Run your Emulator .

2. In your project directory run react-native run-android

You will see your icons !!!!
cheers !!!

[mdforhadsarker]

It worked this way -

1. _android/build.gradle_
   Under
   allprojects { repositories { }
   Put

subprojects { if (project.name.contains('react-native-vector-icons')) { buildscript { repositories { maven { url "https://dl.bintray.com/android/android-tools/" } jcenter() } } } }

1. In your project directory run react-native link
   Then go to your Android Studio , close your project and emulator . Open the project again to sync the gradle .Run your Emulator .

2. In your project directory run react-native run-android

To get more idea visit https://github.com/oblador/react-native-vector-icons#installation

You will see your icons !!!!
cheers !!!

[wangxinxuan]

When I upgraded native-base from 2.13.13 to 2.15.2, this issue happened, I follow below steps to resolve it:

1. edit android/app/build.gradle file, add below content:

project.ext.vectoricons = [
    iconFontNames: [ 'FontAwesome.ttf', 'AntDesign.ttf' ]
]
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

1. copy above font files from node_modules/react-native-vector-icon/Fonts to android/app/src/main/assets/fonts/
2. react-native run-android