CODEWITHSUNDEEP
react-nativereact-native-elements
Carlos Fray
Carlos Fray

Reputation: 23

How to show outlined icons in React Native

I need to show outlined icons in my React Native App. I'm usign react-native-elements with FontAwesome as a font.

          <Icon
            name="star-outline"
            type='font-awesome'
            color="#FFF"
          />

But it shows a (?) instead of icon. If I try with name="star" it shows the star icon filled but I need it outlined style.

I would appreciate any help you can give me.. Thanks

Upvotes: 1

Views: 7855

Answers (3)

Juno Sprite
Juno Sprite

Reputation: 635

  1. Make sure you're actually importing and using FontAwesome from react-native-vector-icons.
  2. The icon you're looking for is actually in the MaterialIcons component, not the FontAwesome component.
  3. There is an icon called start-o in FontAwesome, which is the exact same icon as far as I can tell.

Clarification

The FontAwesome component actually needs to be imported into your Icon component file:

import FontAwesome from 'react-native-vector-icons/FontAwesome';

You then need to make sure you've added the prop type within the <Icon /> definition in order to use it.

Unfortunately, there is no naming convention in the react-native-vector-icons library, so you can't simply type -outline after the icon name and expect it to find the matching icon.

However, the icon you're looking for may still be available, just under a different name or a different import. I agree, it's incredibly annoying, but at least someone took the time to make Material Icons relatively compatible with React Native. You can see and search for all the icons available in this library here:

https://oblador.github.io/react-native-vector-icons/

Upvotes: 0

Amir Doreh
Amir Doreh

Reputation: 1439

At the begging check if the Icon you are using is solid or regular in FontAwesome, then you can also pass the solid, light and brands as props to the Icon tag you are using , you can find more detail on what i am talking about on,

https://github.com/oblador/react-native-vector-icons/blob/master/FONTAWESOME5.md and also you can have both outlined and normal icons and use them without any 3rd party provider i hope it helps

Upvotes: 0

Goskula Jayachandra
Goskula Jayachandra

Reputation: 4201

You are declaring value of attribute type wrongly Change this:

<Icon
            name="star-outline"
            type='font-awesome'
            color="#FFF"
          />

to

      <Icon
        name="star-outline"
        type='FontAwesome'
        color="#FFF"
      />

Hope this helps!

Upvotes: 3

Related Questions