Nativebase: Only some Icon names will work - partial success.

[lancedolan]

react-native, react and native-base version

"react-native": "0.52.2",
"native-base": "2.3.9",
"react-native-vector-icons": "4.5.0",

Steps to reproduce (code snippet or screenshot)

import {Icon} from 'native-base';
<Icon name='md-pin' />
<Icon name='graduation-cap' />

Expected behaviour

See a pin icon, followed by graduation-cap icon

Actual behaviour

See a pin icon, but no graduatin-cap icon, and also get a warning stating "Invalid prop 'name' of value 'graduation-cap'"

Screenshot of emulator/device

https://drive.google.com/open?id=156F6CQAy8y0F9O7CyZqWJxwLamBRCLrB
https://drive.google.com/open?id=1iabWOC-fPdea09a2zP--mKLtLk7RTMyh

Is the bug present in both ios and android or in any one of them?

BOTH

Any other additional info which would help us debug the issue quicker.

This worked for quite a while. I originally used the react-native link react-native-vector-icons command to get it working. Today it stopped working, and I have no idea why. I changed nothing. returning to the exact commit where it was known to work doesn't help. I feel like there must be some cache outside of the project directory that has bad references or something.

I've already tried:

• rm -rf node_modules && npm install
• re-linking again with react-native link react-native-vector-icons
• Following the "manual" steps covered here: https://github.com/oblador/react-native-vector-icons/blob/master/README.md#option-manually
  
  
  
  • This involved me creating a new Info.plist entry like this:
  
  

    <key>UIAppFonts</key>
    <array>
        <string>Entypo.ttf</string>
        <string>EvilIcons.ttf</string>
        <string>Feather.ttf</string>
        <string>FontAwesome.ttf</string>
        <string>Foundation.ttf</string>
        <string>Ionicons.ttf</string>
        <string>MaterialCommunityIcons.ttf</string>
        <string>MaterialIcons.ttf</string>
        <string>Octicons.ttf</string>
        <string>SimpleLineIcons.ttf</string>
        <string>Zocial.ttf</string>
    </array>

• changing versions of nativebase and as well as the vector icon libraruy
• restarting the simulator and React Native Metro Bundler at every step
• Installed and inspected the font files to confirm the icon is in fact IN there

I've got about 5 hours straight into trying to solve this, following all community threads and issues I could find, and following all "auto link" and "manual" solutions. I am successfully pulling in SOMETHING because some icons show up, but some others are not.

[akhil-geekyants]

@lancedolan <Icon/> take Ionicons as the icon family if no type is specified. You can use any one of these icon families

Entypo,
EvilIcons, 
Feather, 
FontAwesome, 
Foundation, 
Ionicons, 
MaterialCommunityIcons, 
MaterialIcons, 
Octicons, 
SimpleLineIcons, 
Zocial 

Attaching a gif

[SupriyaKalghatgi]

1346 #1640

[lancedolan]

This issue was not a question, it is a bug. Even some ionicon icons didn't show up. Because there is no solution, and it looks like you're not this seriously, I'm writing my own wrapper Icon component that doesn't exhibit this bug.

I'm fully aware of the various Font Families, and also that you can specify one with either a StyleProvider or a type property in the latest NativeBase version.

However, what is the EXPECTED behaviour when you DON'T specify a family, but do specify a name that is NOT in Ionicons but IS in another family? Will the Icon component find the family that it does belong to? We have observed that the answer is YES, it will. We've written code like this:

<Icon name="graduation-cap" />

The result was that the icon DOES display, although it DOES NOT exist in IonIcons (see here https://github.com/oblador/react-native-vector-icons/blob/master/glyphmaps/Ionicons.json)

we wrote lots of code like this and it worked for weeks.

All of a sudden, today, it stopped working. Some icons display, others don't, and the decision about which work and do not work seemed arbitrary. Providing a type property to explicitly state the font family didn't help. Some icons show while others did not. Strangely, even some IonIcon icons didn't show up.

[lancedolan]

NOTE: If the answer to this bug of mine is that the graduation-cap never should have showed up, and wasn't expected to show up unless I explicitly specified the FontAwesome font family, then I'm simply at a complete loss for explanations for why it did show up for several weeks across multiple code branches on multiple developers various platforms. If that is truly the case, then it would appear that something was working for weeks which should not have worked, and also you should update your docs at http://docs.nativebase.io/Components.html#icon-def-headref to set expectations better.

Furthermore, we don't have an explanation for why some IonIcon icons stopped displaying as well.

[SupriyaKalghatgi]

@lancedolan

some IonIcon icons stopped displaying

Regarding this, i will verify on this part

EXPECTED behaviour when you DON'T specify a family, but do specify a name that is NOT in Ionicons but IS in another family? Will the Icon component find the family that it does belong to?

This appears to be enhancement request

[SupriyaKalghatgi]

Here is a repo that lists down icons of available react-native-vector-icons icon families.
https://github.com/GeekyAnts/NativeBase-VectorIconApp

[ZeroCool00]

@SupriyaKalghatgi Same issue again.. <Icon name="google" type={typename} style={{ color: color }} />
i pass each type but none work.. google icon not displaying from any type.

[pablozandona]

Same issue here.

I cloned the project NativeBase-KitchenSink, and tested in sidebar items (but this occurs on any screen).

When put the tag active the icons works fine:

<Icon active name={data.icon} style={{ color: "#777", fontSize: 26, width: 30 }} />

But when remove the tag (default mode), this stop of working:

<Icon name={data.icon} style={{ color: "#777", fontSize: 26, width: 30 }} />