Incorrect Icons getting displayed

[NKGS]

n below code you can see Icon used is eye and eye-off but actually app shows cart.Similar is the case for all other ICONS in app. This issue occured after i updated react-native to 0.63 version and also i upgraded nativebase to latest verions.

`InputGroup rounded error={this.props.loginPassword.length > 0 && !this.props.loginPasswordValid} success={this.props.loginPassword.length > 0 && this.props.loginPasswordValid}>

<Input value={this.props.loginPassword} placeholder='Passsword' secureTextEntry={this.props.secureTextEntry} onChangeText={(event) => this.props.handleInputChange('loginPassword', event)} />

<Icon active name={this.props.secureTextEntry ? 'eye-off' : 'eye'} onPress={() => this.props.toggleShowPassword()} />

</InputGroup`

Attaching screenshot of mobilescreen

package.json file: "native-base": "^2.13.13", "react": "16.13.1", "react-native": "0.63.2", "react-native-vector-icons": "^7.0.0"

react-native-config.js module.exports = { project: { ios: {}, android: {}, }, assets: ['./assets/fonts', './assets/icomoon'], };

[jbromberg]

Also having this issue. Updated my app and now all icons are broken.

[jackw01]

Also having this issue using the Ionicons font.

[mike-niemand]

WTH! Same here...with Opticons

[nikolal]

The same issue here.

[danghung24031992]

same me

[kalleriakronos24]

same issue

[NKGS]

I think issue is with nativebase library. As today i updated nativebase library in working project where Icons were perfect. As soon as I updated nativebase library few icons disappeared.

Few fonts like IonIcons, Fontisto and few others are not getting displayed.

I have mentioned type property in all Icon tag still this issue prevail.

Still not sure exact reason as to why these specific icons not getting displayed.

[danghung24031992]

Edit android/app/build.gradle ( NOT android/build.gradle ) and add the following: apply from: "../../node_modules/react-native-vector-icons/fonts.gradle" It's fixed for me

[NKGS]

Edit android/app/build.gradle ( NOT android/build.gradle ) and add the following: apply from: "../../node_modules/react-native-vector-icons/fonts.gradle" It's fixed for me

Tried doing it but no luck.. stills Icons are broken!!

Are you using nativebase library? If yes which version?

It will be great help if you can share these details.

Thanks in advance..

[omarkh17]

same issue with "native-base": "^2.13.7"

[kkor]

Same here on Android without native-base, but on ios the icons work correctly. Editing the android/build.gradle does not help.

[jbromberg]

I've tried downgrading the package, completely uninstalling and then reinstalling, nothing is working for me. I can't get the correct icons to show up on iOS with Ionicons.

[jbromberg]

Has anyone figured out a fix for this? It appears to work normally with other fonts, however Ionicons is still showing the wrong icons.

[rsml]

I had this issue too with Ionicons (tested on iOS) after upgrading react-native-vector-icons, but not upgrading native-base. I resolved it by upgrading native-base to the latest version, then verified that the peerDependency listed in ./node_modules/native-base/package.json for react-native-vector-icons matched the one in my package.json.

Then I ran 'react-native link' for good measure (probably not necessary).

I'm now on react-native-vector-icons@7.0.0 and native-base@2.13.14

[jbromberg]

I had this issue too with Ionicons (tested on iOS) after upgrading react-native-vector-icons, but not upgrading native-base. I resolved it by upgrading native-base to the latest version, then verified that the peerDependency listed in ./node_modules/native-base/package.json for react-native-vector-icons matched the one in my package.json.

Then I ran 'react-native link' for good measure (probably not necessary).

I'm now on react-native-vector-icons@7.0.0 and native-base@2.13.14

What if I am not using native-base?

[rsml]

@jbromberg Check the font file that's included in your iOS or Android project and see if it's being included by a dependency other than react-native-vector-icons. In my case, I looked at the Ionicons.ttf in the Resources folder of my XCode project. Then I did "Right Click -> Show in Finder", to see that the font file was coming from ./node_modules/native-base/Fonts/Ionicons.ttf. If it's coming from some other dependency in your case, try updating that dependency, or checking that the peerDependencies in it's package.json match the version of react-native-vector-icons that you have installed.

Then afterwards run: "react native link" (incase auto-linking is not working or you are on an older version of react native that doesn't support autolinking)

Then try restarting the packager with: "npm start --reset-cache"

[runryan]

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

Works for me! Thanks.

[jbromberg]

@jbromberg Check the font file that's included in your iOS or Android project and see if it's being included by a dependency other than react-native-vector-icons. In my case, I looked at the Ionicons.ttf in the Resources folder of my XCode project. Then I did "Right Click -> Show in Finder", to see that the font file was coming from ./node_modules/native-base/Fonts/Ionicons.ttf. If it's coming from some other dependency in your case, try updating that dependency, or checking that the peerDependencies in it's package.json match the version of react-native-vector-icons that you have installed.

Then afterwards run:

"react native link" (incase auto-linking is not working or you are on an older version of react native that doesn't support autolinking)

Then try restarting the packager with:

"npm start --reset-cache"

You were right. Ionicons.ttf was being referenced elsewhere. This helped me fix it. Thank you!

[whatnowangga]

Edit android/app/build.gradle ( NOT android/build.gradle ) and add the following: apply from: "../../node_modules/react-native-vector-icons/fonts.gradle" It's fixed for me

this one fixed on me, no doubt

[marabita]

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

works for me too

[Gabsys]

Bump, still facing this issue. apply from: "../../node_modules/react-native-vector-icons/fonts.gradle" didn't help me nor updating native-base & react-native-vector-icons.

I realise it was only Ionicons that weren't displaying correctly. Other icons like FontAwesome, MaterialIcons are working fine.

Update: Fixed after I copy & replaced all the .ttf files from node_modules/react-native-vector-icons/Fonts into android/app/src/main/assets/fonts

[lukewlms]

This FAQ link resolved the problem for me:

https://github.com/oblador/react-native-vector-icons#wrong-icons-are-shown-after-upgrading-this-package

Wrong icons are shown after upgrading this package

You probably didn't update the font files linked to your native project after upgrading. However, this only applies to Android targets since iOS bundles the fonts when building the app (try to clean your build from Xcode if the problem exists). On android you can relink the project or you manually update the fonts. To have them automatically synced use the gradle approach.

[jorgeovejero913]

@lukewlms This answer works for me, see the 'Option: With Gradle (recommended)' section, especially this: `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"`