'react native vector icons won't show in android device

I used react-native-vector-icons in my react native project and start app with npm start.

Icons are displaying normally in iOS, but won't show in android.

Things I tried:

three method in the doc of react-native-vector-icons (finally I can see *.tff files in the fonts folder)
use react-native run-android to start app. Icon shows normal but what I want is integrating react native with my existing android app, not a totally RN app.
use jsbundle file instead of debug server in my app

None of above works

So, should I add something to my existing android app?

I don't know how to solve this problem

[email protected]

[email protected]

[email protected]

node v5.10.1

npm v3.8.3

Solution 1:^[1]

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

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

You can follow the instructions to properly install the module on Android: react-native-vector-icons#install-android

Solution 2:^[2]

I fixed it this by executing:

react-native link
react-native run-android

Solution 3:^[3]

Open terminal on same project path :

react-native link react-native-vector-icons 
react-native run-android

Solution 4:^[4]

Edit android/app/build.gradle

Just add in dependencies

implementation project(':react-native-vector-icons')

Below lines of code are optional if you are using RN >0.60

Edit android/app/build.gradle ( NOT android/build.gradle ) and add the following:

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

Edit android/settings.gradle to look like this:

rootProject.name = 'MyApp'

include ':app'

// Add these two lines
include ':react-native-vector-icons'
project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')

references: https://github.com/oblador/react-native-vector-icons

Solution 5:^[5]

After doing the below-Mentioned steps, working Fine.

Before, make sure these steps.

Install package:

 yarn add react-native-vector-icons

Import: import Ionicons from 'react-native-vector-icons/Ionicons';

Example code:

return (
      <View style={styles.buttonCircle}>
        <Ionicons
          testID="nextButton"
          name="arrow-forward"
          color="rgba(255, 255, 255, .9)"
          size={24}
          style={{backgroundColor: 'transparent'}}
        />
      </View>
    );

Open android/app/build.gradle and Add below mentioned line after the react.gradle.

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

Open android/settings.gradle Add below Mentioned line.

// Add these two lines

include ':react-native-vector-icons'
project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')

You Stop the Development server and Rerun the App react-native run-android

I Hope, It's helpful.

Solution 6:^[6]

I've same issue and than I solved this, let's try :

Open android/app/build.gradle ( NOT android/build.gradle )
add the following: apply from: file("../../node_modules/react-native-vector-icons/fonts.gradle")
After that you must stop the Dev, and Restart/Run it again(npm run android)

Hopefully this will help you :D

Solution 7:^[7]

In :-   android/app/build.gradle

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

and setting.gradle file add this 

include ':react-native-vector-icons'
project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')

Solution 8:^[8]

I had everything configured as mentioned in other answers but still running react-native run-android i keep seeing the app without the icons!

Simply i did:

cd android && ./gradlew clean

then another

react-native run-android

And it worked yaay!

Solution 9:^[9]

Open android/app/bundle.gradle

Solution 10:^[10]

I am having the same issue and I fixed it this by executing:

npx react-native link react-native-vector-icons npx react-native run-android

Solution 11:^[11]

when importing the Icon it show something like that.

To fix this run,

npx react-native link && npx react-native run android

After the command execution

Solution 12:^[12]

Follow the official recommandations (https://github.com/oblador/react-native-vector-icons#android) to have this module loads when creating the bundle :

Edit android/app/build.gradle ( NOT android/build.gradle ) and add the following:

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

Solution 13:^[13]

This may have several possible answers:

1- maybe the icon that you use is just for ios ...try to see other logo packs in link below: https://oblador.github.io/react-native-vector-icons

2- maybe you import the wrong link for using the package at the top of your code where you import this vector icon, import exact link for example:

this is wrong: import Icon from "react-native-vector-icons and this is true: "import Icon from "react-native-vector-icons/MaterialIcons";"

Solution 14:^[14]

simplely npm unlink react-native-vector-icons,and then npm link react-native-vector-icons. (if your ReactNative version is below 0.60)

Solution 15:^[15]

In Android platform icon showed me like this:

enter image description here

after some time of troubleshouting I finally find out solution.

Beacouse of I use my own icon set I created iconSet.ttf from iconSet.svg by IcoMoon App.

In fact I followed this tutorial: https://medium.com/bam-tech/add-custom-icons-to-your-react-native-application-f039c244386c

IcoMoon App created *.ttf and selection.json and problem was in selection.json.

I renamed *.ttf file to myIcons.ttf but I had to change fontFamily and name in the end of file selection.json to same name like I named *.ttf file. In my case myIcons.ttf I renamed name and fontFamily to myIcons in selection.json

Solution 16:^[16]

You can use icons as SVG just by using selection.json file. The Developer Experience is very high and requires very little effort.

I hope this module makes your work easier when working with icons.

react-icomoon

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Luis Fer Garcia
Solution 2	General Grievance
Solution 3	Al2x
Solution 4
Solution 5	Elavarasan r
Solution 6	Risqi Ardiansyah
Solution 7	Sourabh Gera
Solution 8	Nimir
Solution 9	sta
Solution 10
Solution 11	Abhijith v
Solution 12
Solution 13
Solution 14	zhaoyu zhang
Solution 15	Petrik-a-dost
Solution 16	Aykut Karda?

'react native vector icons won't show in android device

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]

Solution 7:[7]

Solution 8:[8]

Solution 9:[9]

Solution 10:[10]

Solution 11:[11]

Solution 12:[12]

Solution 13:[13]

Solution 14:[14]

Solution 15:[15]

Solution 16:[16]