34
votes

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
11
I gave up and ended up manually copying the fonts over to the myapp/android/app/src/main/assets/ folder from the myapp/node_modules/react-native-vector-icons/Fonts folder..Vegard

11 Answers

61
votes

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

38
votes

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

react-native link
react-native run-android
21
votes

Open terminal on same project path :

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

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

9
votes

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

8
votes

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!

5
votes

Open android/app/bundle.gradle

enter image description here

5
votes

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.

3
votes

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

2
votes

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"

1
votes

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