Icons incorrect

[NKGS]

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

[apgsn]

Happened to me too. Reinstalling npm packages and pods after removing package-lock.json solved the problem for me.

[NKGS]

Hi apgsn

Happened to me too. Reinstalling npm packages and pods after removing package-lock.json solved the problem for me.

I deleted node modules, package-lock.json and reinstalled all dependencies but still facing same issue. Also I tried to downgrade nativebase and react-native-vector-icons library but still facing same issue.

[RutsSantos]

I'm facing the same problem after i updated react-native-vector-icons

[theberbie]

Seems related to https://github.com/GeekyAnts/NativeBase/issues/3213

[padupuy]

@NKGS i don't why but i had to explicit set the type of the Icon to fix this issue <Icon active name="eye" type="Ionicons"/>

[theberbie]

@padupuy makes sense. The Icon component expects a type, and my guess here is that the wrong icon is returned when the type is not set because it falls back to a default value:

IconNB.propTypes = {
  type: PropTypes.oneOf([
    'AntDesign',
    'Entypo',
    'EvilIcons',
    'Feather',
    'FontAwesome',
    'FontAwesome5',
    'Foundation',
    'Ionicons',
    'MaterialCommunityIcons',
    'MaterialIcons',
    'Octicons',
    'SimpleLineIcons',
    'Zocial'
  ])
};

interface Icon extends Testable {
            name?: string;
            type?: "AntDesign" | "Entypo" | "EvilIcons" | "Feather" | "FontAwesome" | "FontAwesome5" | "Foundation" | "Ionicons" | "MaterialCommunityIcons" | "MaterialIcons" | "Octicons" | "SimpleLineIcons" | "Zocial";
            // TODO position attribute of ReactNative.FlexStyle hasn't another position values without "absolute" and "relative"
            style?: any;
            onPress?: (e?: any) => any;
            active?: boolean;
            ios?: string;
            android?: string;
            color?: string;
            fontSize?: number;
        }

[NKGS]

Seems related to #3213

Yes I suppose. 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.

@padupuy, @theberbie I have modified my code and added type property in all Icon tag still this issue prevail.

[hanykumar]

Hi @NKGS , can you provide minimal code reproduction on snack for the same.

<Icon active name="eye"  type="Ionicons"/>
<Icon active name="eye-off" />

[wbw20]

I faced a similar issue on Android after updating to version 7.0.0 of react-native-vector-icons. I noticed that the actual font assets in my app bundle had not changed, so I wound up copying the font files manually from node_modules/react-native-vector-icons/Fonts to android/app/src/main/assets/.

After that I cleaned my Android build with cd android && ./gradlew clean and then re-ran my project. All of the icons were fixed.

This is a frustrating issue to deal with but I don't think its related to Native Base. Hope my solution helps.

[sefamertkaya]

Same problem

[jahead]

Hey I think we may have found a solution, if people are still facing the issue, can they checkout the comments here #3262 ?

Basically we had to follow the manual linking process of react-native-vector-icons for both iso and android. Going from v7< to v7> requires some cleaning of the dev environment.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[ozzfelipe]

I faced a similar issue on Android after updating to version 7.0.0 of react-native-vector-icons. I noticed that the actual font assets in my app bundle had not changed, so I wound up copying the font files manually from node_modules/react-native-vector-icons/Fonts to android/app/src/main/assets/.

After that I cleaned my Android build with cd android && ./gradlew clean and then re-ran my project. All of the icons were fixed.

This is a frustrating issue to deal with but I don't think its related to Native Base. Hope my solution helps.

This worked for me!

[samthui]

I faced a similar issue on Android after updating to version 7.0.0 of react-native-vector-icons. I noticed that the actual font assets in my app bundle had not changed, so I wound up copying the font files manually from node_modules/react-native-vector-icons/Fonts to android/app/src/main/assets/.

After that I cleaned my Android build with cd android && ./gradlew clean and then re-ran my project. All of the icons were fixed.

This is a frustrating issue to deal with but I don't think its related to Native Base. Hope my solution helps.

manually copying font files from node-modules did the trick. npm link somehow doesn't link correctly, I guess