如何在本机应用程序中添加@expo/vector-icons？

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

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.

Answer 2

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

Answer 3

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 4

Have you noticed that I want to use create-react-native-app instead of expo init and later on use expo icons

npm i -g create-react-native-app
 create-react-native-app my-project
 cd my-project
 npm start

Answer 5

go to 'https://icons.expo.fyi/' choose whatever you want, first import via copy,then use it. look example

 import React from 'react' import { Entypo } from '@expo/vector-icons'; import {View} from 'react-native'; export const Example=()=>{ return( <View> <Entypo style={styles.editDown} name="plus" size={24} color="black" /> </View> ) }