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

About this issue

Original URL
State: closed
Created 4 years ago
Comments: 23

Most upvoted comments

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

+21

danghung24031992 on Aug 21, 2020

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…

NKGS on Aug 21, 2020

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

rsml on Sep 3, 2020

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.

lukewlms on Mar 24, 2021

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

Gabsys on Jan 12, 2021

apply from: “…/…/node_modules/react-native-vector-icons/fonts.gradle”

Works for me! Thanks.

runryan on Sep 10, 2020