react-native-vector-icons Incorrect Icons getting displayed

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 screenshot-1597334117899

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'], };

Aug 14 '20 06:08 NKGS

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

Aug 14 '20 17:08 jbromberg

Also having this issue using the Ionicons font.

Aug 17 '20 19:08 jackw01

WTH! Same here...with Opticons

Aug 17 '20 20:08 mike-niemand

The same issue here.

Aug 18 '20 10:08 nikolal

same me

Aug 20 '20 04:08 danghung24031992

same issue

Aug 20 '20 14:08 kalleriakronos24

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.

Aug 21 '20 07:08 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

Aug 21 '20 08:08 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

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..

Aug 21 '20 11:08 NKGS

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

Aug 22 '20 11:08 omarkh17

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

Aug 25 '20 08:08 kkor

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.

Aug 31 '20 21:08 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.

Sep 02 '20 21:09 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 [email protected] and [email protected]

Sep 03 '20 20:09 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 [email protected] and [email protected]

What if I am not using native-base?

Sep 03 '20 20:09 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"

Sep 03 '20 21:09 rsml

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

Works for me! Thanks.

Sep 10 '20 01:09 runryan

@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!

Sep 10 '20 20:09 jbromberg

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

Oct 03 '20 16:10 whatnowangga

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

works for me too

Oct 10 '20 07:10 marabita

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

Jan 12 '21 08:01 Gabsys

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.

Mar 24 '21 05:03 lukewlms

@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"`

May 19 '22 01:05 jorgeovejero913