React-native-vector-icons: Icons not showing up on Android apk-release

Created on 6 Jun 2018  路  16Comments  路  Source: oblador/react-native-vector-icons

I am using the following version:
"react": "^16.3.1",
"react-native": "^0.55.4",
"react-native-vector-icons": "^4.6.0",

  • The icons show up on Android / iOS Simulators
  • The icons show up on iPhone Devices
  • The icons show up on Android Devices run through Android Studio and installed from apk-debug

As soon as I install from apk-release, the icons disappear completely without even the box with the cross.

I am installed using:

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

Please help. Thanks!

Most helpful comment

As an actionable item for @oblador , I think we have two options:

  1. Investigate why apply from: "../../node_modules/react-native-vector-icons/fonts.gradle" isn't copying over fonts to android/app/src/main/assets/fonts/
  2. Remove the fonts.gradle setup as the suggested option.

For 1, I'm doing a production build with the following commands:

$(npm bin)/react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res

Then in Android Studio 3.1.2 (And Gradle 4.4), in my android/app/build.gradle:

// project.ext.vectoricons = [
//     iconFontNames: [ 'MaterialIcons.ttf', 'EvilIcons.ttf', 'FontAwesome.ttf', 'Ionicons.ttf', 'Entypo.ttf' ] // Name of the font files you want to copy
// ]
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

I have that situated above my dependencies {} and task copyDownloadableDepsToLibs(type: Copy) blocks, if that makes any difference.

All 16 comments

+1

Did it used to work and broke with an upgrade of RN/RNVI or did it never work?

I have the same issue

It used to work before the RN upgrade, I'm also using the apply from method just like @kelvinblade.

"react": "16.3.1",
"react-native": "0.55.4",
"react-native-vector-icons": "^4.6.0",

Any ideas?

Fix:

I copied the icons manually using the following and it works fine

Copy the contents in the Fonts folder to android/app/src/main/assets/fonts (note lowercase font folder).

same
"react": "16.0.0", "react-native": "0.51.0", "react-native-vector-icons": "^4.5.0",
Icons not showing up on Android

same issue,
I copied the icons manually on the corresponding folder and same issue.
After some time I realize I had a typo in my font name reference. It was with the first letter in uppercase.

  • Make sure both the file name in assets/fonts and the code match the name :P

@carlosvega20 was the problem that you had uppercase and you fixed it by lowercasing, or that it was lowercase and you fixed it by uppercasing, your message isn't clear.

As an actionable item for @oblador , I think we have two options:

  1. Investigate why apply from: "../../node_modules/react-native-vector-icons/fonts.gradle" isn't copying over fonts to android/app/src/main/assets/fonts/
  2. Remove the fonts.gradle setup as the suggested option.

For 1, I'm doing a production build with the following commands:

$(npm bin)/react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res

Then in Android Studio 3.1.2 (And Gradle 4.4), in my android/app/build.gradle:

// project.ext.vectoricons = [
//     iconFontNames: [ 'MaterialIcons.ttf', 'EvilIcons.ttf', 'FontAwesome.ttf', 'Ionicons.ttf', 'Entypo.ttf' ] // Name of the font files you want to copy
// ]
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

I have that situated above my dependencies {} and task copyDownloadableDepsToLibs(type: Copy) blocks, if that makes any difference.

I also verify that the project.ext.vectoricons is not working with the latest Android Studio and gradle (4.4). The fonts selected there are not copied.

If this cannot be fixed, maybe remove it from documentation?

Thanks!

In my case what helped is setting Minify flag in Android for "false":
screen shot 2018-11-30 at 11 10 16 am

+1 to @Symyon 's solution (even after https://github.com/oblador/react-native-vector-icons/pull/923). This was the only thing that worked for me.

upgrading gradle helps me - https://github.com/expo/expo/issues/3226#issuecomment-520783975

same problem here

I've tried everything in this thread.

I've added the apply from line, I've copied fonts over, I've unlinked, re-linked, removed, re-downloaded, etc.

The icons show up for my in debug, but do not display for me at all in release.

Same issue I am facing for last 2 weeks
All icons are showing when I load on expo
every thing work fine
but when I build apk and install it, all font are just showing like [x]
please Help!!!

Am experiencing the exact same problem. This is nearly 2 years after the onset of this thread. There is a serious issue here which it would be great to know a workaround let alone a solution. I have tried everything on this and several other threads to no avail and have spent 2 16 hour days attempting to put this to bed.

I can see the fonts are present inside the apk in the assets/fonts folder. However on a release apk build they appear as Xs. Debug builds are working fine.

I am on react-native 0.61.5

What helped me was to remove android/app/build folder and I ran ./gradlew clean before building APK.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

jakewtaylor picture jakewtaylor  路  4Comments

semnyqu picture semnyqu  路  3Comments

peacechen picture peacechen  路  3Comments

arjs1000 picture arjs1000  路  3Comments

obykoo picture obykoo  路  3Comments