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 react@15.2.0 react-native@0.30.0 react-native-vector-icons@2.0.3 node v5.10.1 npm v3.8.3

androidreact-native

Theodore

Reputation: 761

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

Upvotes: 73

Answers (30)

Farhan Mian

Reputation: 22

Add this line in your /android/app/build.gradle file:

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

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

Upvotes: 0

Sachin Pandey

Reputation: 21

In case anyone else is facing issues, here’s what worked for me. You can copy my code and replace the content in your ..\myApp\android\app\build.gradle file.

apply plugin: "com.android.application"
apply plugin: "org.jetbrains.kotlin.android"
apply plugin: "com.facebook.react"

react {

    def enableProguardInReleaseBuilds = false
    def jscFlavor = 'org.webkit:android-jsc:+'

    android {
        ndkVersion rootProject.ext.ndkVersion
        buildToolsVersion rootProject.ext.buildToolsVersion
        compileSdk rootProject.ext.compileSdkVersion

        namespace "com.awesomeproject"
        defaultConfig {
            applicationId "com.awesomeproject"
            minSdkVersion rootProject.ext.minSdkVersion
            targetSdkVersion rootProject.ext.targetSdkVersion
            versionCode 1
            versionName "1.0"
        }
        signingConfigs {
            release {
                if (project.hasProperty('MYAPP_UPLOAD_STORE_FILE')) {
                    storeFile file(MYAPP_UPLOAD_STORE_FILE)
                    storePassword MYAPP_UPLOAD_STORE_PASSWORD
                    keyAlias MYAPP_UPLOAD_KEY_ALIAS
                    keyPassword MYAPP_UPLOAD_KEY_PASSWORD
                }
            }
            debug {
                storeFile file('debug.keystore')
                storePassword 'android'
                keyAlias 'androiddebugkey'
                keyPassword 'android'
            }
        }
        buildTypes {
            debug {
                signingConfig signingConfigs.debug
            }
            release {
                signingConfig signingConfigs.release
                minifyEnabled enableProguardInReleaseBuilds
                proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
            }
        }
    }

    dependencies {
        implementation("com.facebook.react:react-android")

        if (hermesEnabled.toBoolean()) {
            implementation("com.facebook.react:hermes-android")
        } else {
            implementation jscFlavor
        }
    }
}

apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle")
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
applyNativeModulesAppBuildGradle(project)

This setup resolved my issue, so it might work for you too.

Best of luck!
Sachin Pandey

Upvotes: 0

Dharmendra Singh Patel

Reputation: 47

In my case class override issue was also coming as per "Android Setup" guide.

=> Do not follow all the points on "Android Setup" in my suggestion to avoid above problem

Only Edit android/app/build.gradle (NOT android/build.gradle) to provide icon path:-

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

Upvotes: 0

Petrik-a-dost

Reputation: 233

In Android platform icon showed me like this:

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

Upvotes: 1

Luis Fer Garcia

Reputation: 3784

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

apply from: file("../../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

Upvotes: 166

Alan Fermin

Reputation: 1

In /android/app/build.gradle change {} by [] in project.ext.vectoricons and add the following line:

import com.android.build.OutputFile

THIS IS MY ERROR: Could not compile build file '/Users/dev/Apps/run/User/android/app/build.gradle'.

startup failed: build file '/Users/dev/Apps/run/User/android/app/build.gradle': 5: Statement labels may not be used in build scripts. In case you tried to configure a property named 'iconFontNames', replace ':' with '=' or ' ', otherwise it will not have the desired effect. @ line 5, column 20. iconFontNames: [ 'Ionicons.ttf' ] // Specify font files

PATH: User/android/app/build.gradle:

File Before solution:

apply plugin: "com.android.application"
apply plugin: "com.facebook.react"

project.ext.vectoricons = {
  iconFontNames: [ 'Ionicons.ttf' ] // Specify font files
}

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

File After Solution:

apply plugin: "com.android.application"
apply plugin: "com.facebook.react"

project.ext.vectoricons = [
  iconFontNames: [ 'Ionicons.ttf' ] // Specify font files
]

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

import com.android.build.OutputFile

Upvotes: 0

محمدجواد علوی

Reputation: 1

you can use this git page react-native-vector-icons git page to configure react-native-vector-icons

and if you get an error about the classpath :

go to node_modules and find react-native-vector-icon folder
Open android folder and open build.gradle Note: same this ===>>> project/node_modules/react-native-vector-icon/android and open build.gradle
and replace VER with +

buildscript { ..... dependencies { classpath("com.android.tools.build:gradle:VER") } }

Upvotes: 0

Bruno P

Reputation: 1

Well, using "vector-icons" through the default "npm install" can be very annoying sometimes... One alternative way to solve this problem is using the "expo shortcut". The "vector-icons" is part of the expo package.

First, you need the expo installed:

$ npm i -g expo-cli

You should create your project with 'expo' using:

$ npx create-expo-app yourProjectName

Then, move to your project's paste:

$ cd yourProjectName

Now, run your project with:

$ npx expo start

Code part, now:

Inside one of your file's projects, try to import your desired collection like 'Feather'

$ import {Feather} from '@expo/vector-icons'

Finally, you can use it like this:

$ <Feather name={"youIcon'sName"}/>

I tried many ways with the default "npm install" (https://github.com/oblador/react-native-vector-icons#installation) with limited success. But on the first try with expo, everything worked like a charm. Sometimes, we only need a different approach...

Hope it works!

Best regards for all.

Upvotes: 0

Sarib Khan

Reputation: 1

In Android folder -> App Folder -> Build.gradle file -> dependencies section Add the follow line like that

dependencies { implementation project(':react-native-vector-icons') //ADD THIS LINE }

Upvotes: 0

Mahendren Mahisha

Reputation: 1062

Whatever Icons you are using in your project mention that font name inside project.ext.vectoricons (like FontAwesome.ttf). For my project I have used fontawesome so include fontawesome.ttf.

project.ext.vectoricons = [
    iconFontNames: [ 'MaterialIcons.ttf', 'EvilIcons.ttf','Ionicons.ttf','FontAwesome.ttf' ] // Name of the font files you want to copy
]

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

Add these two lines to android/app/build.gradle.

that's all... enjoy your coding...

Upvotes: 1

Deepak Singh

Reputation: 1145

in my case, I followed all the documentation steps but the icon was not showing on Android then after that I have check the fonts.gradle under

projectNameYour/node_modules/react-native-vector-icons/fonts.gradle

then I noticed that there was no file under the font.gradle. then uninstall react-native-vector-icons and again install then i checked below files are present there

Upvotes: 0

A. Ahmad

Reputation: 536

If you are having this problem for android. You would have to do the settings in android folder.

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

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

For more details follow this installation guide.

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

Upvotes: 1

Mahendren Mahisha

Reputation: 1062

Just add below android/app/builg.gradle

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

that's all. enjoy your coding...

Upvotes: 0

mcnk

Reputation: 2331

After adding the font names to my android/app/build.gradle it is fixed.

project.ext.vectoricons = [
    iconFontNames: [ 'Feather.ttf',"FontAwesome.ttf" ] // Name of the font files you want to copy
]

Upvotes: 0

Shivam

Reputation: 74

In my case auto linking was failing. I resolved it by copying Fonts folder from react-native-vector-icons inside node_modules to src/main/assets/fonts.

Upvotes: 1

pawan kumar

Reputation: 131

I followed every solution but nothing worked

Link command (Link not supported)
asset command (config file not exists)

Both didn't worked but at last solution that works is Adding following lines in build.gradle file

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

Paht of the file is android/app/build.gradle

NOTE:- please use npx react-native run-android command again to see changes

Upvotes: 3

Meliodev

Reputation: 9

npm install [email protected] --save

This version worked for me !

Upvotes: 1

Irfan Khan

Reputation: 511

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

Upvotes: 27

Bmaed Riasbet

Reputation: 14998

I fixed it this by executing:

react-native link
react-native run-android

Upvotes: 45

Aykut Kardaş

Reputation: 1

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

Upvotes: 0

Abhijith v

Reputation: 364

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

Upvotes: 7

Md Ashraful Islam

Reputation: 59

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

Upvotes: 5

Sourabh Gera

Reputation: 1006

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')

Upvotes: 23

zhaoyu zhang

Reputation: 1

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

Upvotes: 0

Elavarasan r

Reputation: 1285

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.

Upvotes: 17

Lucky_dev

Reputation: 91

Open android/app/bundle.gradle

Upvotes: 9

Risqi Ardiansyah

Reputation: 417

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

Upvotes: 11

Jérôme

Reputation: 1128

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"

Upvotes: 3

Al2x

Reputation: 1039

Open terminal on same project path :

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

Upvotes: 28

Nimir

Reputation: 5839

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!

Upvotes: 9

react native vector icons won&#39;t show in android device

Answers (30)

Related Questions

react native vector icons won't show in android device