react native vector icons won't show in android device

Question

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

Answer 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

Answer 2

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

react-native link
react-native run-android

Answer 3

Open terminal on same project path :

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

Answer 4

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

Answer 5

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

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

Hopefully this will help you :D

Answer 6

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!

Answer 7

Open android/app/bundle.gradle

Answer 8

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.

Answer 9

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

Answer 10

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"

Answer 11

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";"