how to add #expo/vector-icons in react native app? - react-native

Question

i am using #expo/vector-icons here is my package.json file
"dependencies": {
"#expo/vector-icons": "^4.1.1",
"color": "^1.0.3",
"expo": "^30.0.1",
"moment": "^2.22.2",
"react": "16.3.1",
"react-native": "https://github.com/expo/react-native/archive/sdk-
30.0.0.tar.gz",
"react-native-extended-stylesheet": "^0.4.0" },
when i import #expo/vector-icon library in my component
import { Ionicons } from '#expo/vector-icons';
it gives error

Answer 1

The library comes by default so you don't need to install #expo/vector-icons.
You can just do this for example:
import { Ionicons } from '#expo/vector-icons';
and then you can use it like:
<Ionicons name="ios-pizza" color="red" size={200} />
FYI, this directory is helpful in finding different icons https://expo.github.io/vector-icons/

Answer 2

In your dependencies (package.json) remove #expo/vector-icons. They are included in the expo package and different versions of expo and expo/vector-icons can cause errors like this one.
From the official docs:
This library is installed by default on the template project that get
through expo init -- it is part of the expo package. It includes
popular icon sets and you can browse all of the icons using the
#expo/vector-icons directory.
Update 2021:
The official docs changed a bit, and instead of searching for icons in:
#expo/vector-icons directory
You can now search using:
icons.expo.fyi
This makes it far easier than before.

Answer 3

Go to 'https://icons.expo.fyi/' choose whatever you want, then import via copy, then use it.
import React from 'react'
import { Entypo } from '#expo/vector-icons';
import { View } from 'react-native';
export const Example = () => {
return(
<View>
<Entypo name="plus" size={24} color="black" />
</View>
)
}

Answer 4

Delete your node module folder and run expo init. And run the project