CODEWITHSUNDEEP
react-native
haosmark
haosmark

Reputation: 1127

react-native-elements icons not showing

React-Native-Elements icons showing as (?)

What am I doing wrong? The code looks nearly identical to the sample that they provided on their site.

This is what I see (don't mind the middle icon, it's brought in differently):

enter image description here

Code that I'm using for the left icon:

<Icon name='users' type='Feather' size={25} color={tintColor} />

Code for the right icon:

GamesInProgressTab: {
    screen: GamesInProgressNavigator,
    navigationOptions: {
    title: 'Games',
    tabBarIcon: ({ tintColor }) => ( <Icon name='rocket' type='Entypo' size={25} color={tintColor} /> ),
    }
}

Upvotes: 4

Views: 5480

Answers (2)

Tadiwanashe
Tadiwanashe

Reputation: 1304

In my case, I was using react native elements and the Icons were not showing, only displaying Chinese/Japanese type of a font.

Note: My app was React Native CLI managed and NOT Expo managed.

My Environment:

react-native": "0.62.1", react-native-elements": "^1.2.7"

Despite being advised that in RN > 0.60 linking is automatic, I had to manually link the vector icons using:

react-native link react-native-vector-icons

Upvotes: 8

Pritish Vaidya
Pritish Vaidya

Reputation: 22189

You have a typo in your type prop.

You need to use one of the following names of the supported types

  • material-community
  • font-awesome
  • octicon
  • ionicon
  • foundation
  • evilicon
  • simple-line-icon
  • zocial
  • entypo
  • feather

Upvotes: 4

Related Questions