Problem with Icons

[jobergner]

Im trying to use the icons. I think i'm doing everything right, but it just won't work. All i get is a little crossed out box. Does anyone know what I'm doing wrong?
Sorry if this isn't the right place to put this btw. I'm new here.

[dabit3]

Hey. What version of react-native are you using? Also, did you get any errors when installing the library? Finally, did you restart the packager after installing it? Thanks.

[dabit3]

@Java-Jonas Any luck with this?

[jobergner]

my dependencies:
"dependencies": {
"react": "15.3.1",
"react-native": "0.33.0",
"react-native-elements": "^0.4.0",
"react-native-vector-icons": "^2.1.0"
}

restarted everything, still not working. no errors. :(

[mtzaldo]

I have the same issue, running an example on Android, instead of the icon it displays a square with an X ... here are my dependencies:

"dependencies": {
"isomorphic-fetch": "^2.2.1",
"react": "15.2.1",
"react-native": "0.31.0",
"react-native-elements": "^0.4.2",
"react-native-vector-icons": "^2.1.0",
"react-redux": "^4.4.5"
}

[dabit3]

Ok, looking into this now. @Java-Jonas Are you also having this issue on Android, or are you using iOS? cc @mtzaldo

[dabit3]

Any way I can see your component declarations @mtzaldo @Java-Jonas ? Thanks.

[mtzaldo]

Yes, I just pushed the code:

https://github.com/mtzaldo/react-native-redux-example

[dabit3]

@mtzaldo is ListItem the component that's giving you an issue with the icon?

[mtzaldo]

@dabit3 Yes, that is the one that is not displaying the right-chevron.

[dabit3]

[dabit3]

Very interesting, I'm getting it working for some reason. Are there any errors in your console?

[mtzaldo]

@dabit3 No, I think I could be my emulator. For some reason the font is not being displayed correctly. I thing the issue is not with your components.

[dabit3]

Have you tried using only the react-native-vector icons in your project? It sounds like it could be an issue with that library being installed correctly, as is often the case I think. @mtzaldo

[mtzaldo]

I will review the library. It is the first time I try it, maybe I need to tweak something. Thanks @dabit3

[dabit3]

@mtzaldo Ok cool, let me know if you have any more questions!

[mtzaldo]

@dabit3 Yes, I was missing some lines in android/app/build.gradle. The icons are now being displayed correctly. Thanks again. Great project btw!

[dabit3]

Thanks, glad you got it fixed. Quick note, I noticed that the avatar is not rendering as a circle correctly for some reason. I'm taking a look at this now and will be releasing a fix for this along with some other stuff tonight. @mtzaldo

[jobergner]

@mtzaldo can you explain me what exactly you did to fix this problem? i really need those icons to work! :(

[mtzaldo]

@Java-Jonas You can go the repo of the icons: https://github.com/oblador/react-native-vector-icons#android here they tell you what to do to copy the fonts in the device.

[raduflp]

I was having a similar issue, then I realized I didn't reinstall the app after adding react-native-vector-icons. So a simple react-native run-android fixed it for me.

[xstable]

Same for me like for @raduflp... but I've reinstalled the app.
But anyway I do it again, Kill the App-Process at the emulator and restart the app. Now Icons appear.
😕

[lai32290]

I fix this issue like this step:

• switch react-native to react-native-cli.
  $ npm uninstall -g react-native
$ npm install -g react-native-cli

• installing react-native-elements
$ npm install -S react-native-elements

• installing react-native-vector-icons
$ npm install -S react-native-vector-icons

• link it to project using react-native link
$ react-native link react-native-vector-icons

• restarting development server
  $ npm start

• rebuild project
  $ react-native run-android

and that's it! I hope to help you

[SOftEngrAtta]

@lai32290 working after following your instructions (y)

[lai32290]

@SOftEngrAtta that's cool! I'm happy for this! 😄

[romandr25]

Please put it in the "getting started" section.

For me helped:

Android
Option: With Gradle (recommended)
This method has the advantage of fonts being copied from this module at build time so that the fonts and JS are always in sync, making upgrades painless.

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

apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
To customize the files being copied, add the following instead:

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

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

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