Only some Icon names will work - partial success.

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.

[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 }} />

[akhil-ga]

@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