CODEWITHSUNDEEP
react-native
MoHammaD ReZa DehGhani
MoHammaD ReZa DehGhani

Reputation: 585

Problem with "react-native-vector-icons" in React native

I install this library :

npm install react-native-vector-icons

and link it

react native link

and i import it to my project

import Icon from 'react-native-vector-icons/Ionicons'

then i use it in render part of the component like this :

<Icon name={'ios-person-outline'} />

But when i run the android app there is no error but the icon is a qustion icon eny body has idea ?

Upvotes: 6

Views: 33027

Answers (6)

Victor Ejiogu
Victor Ejiogu

Reputation: 1384

I used to have similar issues when I started with react-native-vector-icons until I got to understand the different type components.

type="AntDesign"

type="Entypo"

type="FontAwesome"

type="FontAwesome5"

type="FontAwesome5Brands"

type="Foundation"

type="Ionicons"

type="MaterialCommunityIcons"

type="MaterialIcons"

type="SimpleLineIcons"

type="Octicons"

etc...

Icon name "person-outline" can be found under "MaterialIcons" on "https://oblador.github.io/react-native-vector-icons/", so we can do;

<Icon name='person-outline' type="MaterialIcons" />

Hope this explanation helps.

NOTE: Make sure you take the initial steps like;

npm install react-native-vector-icons --save

AND

react-native link react-native-vector-icons

Upvotes: 12

Djafer Abdelhadi
Djafer Abdelhadi

Reputation: 529

Try adding the next line to your /app/build.gradle

apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

Upvotes: 1

Raj Shah
Raj Shah

Reputation: 738

Step 1: Install react-native-element:

npm install react-native-elements --save

Steps 2: Install react-native-vector-icons Install from npm

npm install react-native-vector-icons --save

Link It

react-native link react-native-vector-icons

Step 1: After that you can use it on your page by

import { Icon } from 'react-native-elements';

Step 2:

<Icon name="md-beer" type="ionicon" color="#887700" />

Upvotes: 1

Anayo Oleru
Anayo Oleru

Reputation: 516

In addition to @Kivul's answer. Whenever you want to use the react-native-vector-icons. Instead of specifying the type on the component, just simply import the type of icon the name belongs to and use it. Below is an example of this:

import { 
   Ionicons, 
   Entypo, 
   MaterialCommunityIcons, 
   FontAwesome 
} from '@expo/vector-icons/';

Then in your render method, return any of the components, and pass in the name of the icon.

pick the name from https://oblador.github.io/react-native-vector-icons/

<FontAwesome 
  name={'money'} 
 ... 
 />

Same with the others, find the name, then the component it belongs to, import it and add the name to it.

I hope this helps?

Upvotes: 2

kivul
kivul

Reputation: 1158

react-native-vector-icons have a lot of 'types' for the icons, you can see them here: https://oblador.github.io/react-native-vector-icons/

You should specify the type of the icon on your import or when you are using them in your code. For example:

import SimpleIcon from 'react-native-vector-icons/SimpleLineIcons';

The code above will import only the SimpleLineIcons, then you can use them like this:

<SimpleIcon name="user" color="rgba(110, 120, 170, 1)" size={25} />

Or, you can import them like this:

import Icon from 'react-native-vector-icons/'

And then, use it like this (specifying the type):

<Icon
  name='check'
  color='rgba(0, 0, 0, 0.38)'
  size={25}
  type="entypo"
/>

Upvotes: 2

Suraj Malviya
Suraj Malviya

Reputation: 3783

There can be two things, either you might not be writing the correct name of the icon or that specific icon is not being found via the library. Its a very common problem with the library. Try changing the icon name with some other more common icon and it will work. Its not actually issue. Please check and see if that helps. Thanks.

Also you should change the import statement of Ionicons to /Ionicons. I am not sure how is that with \ even working but hope my solution helps.

Have just tried to use the ios-person-outline, and as expected it didn't work, but ios-person did. Its a very common issue with the library that it doesnt honor the outline and other kinds of icons, it also happens with the material icon when trying to use solid or some other type of icon.

Upvotes: 1

Related Questions