CODEWITHSUNDEEP
react-nativeexpo
Abdur Rehman
Abdur Rehman

Reputation: 75

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

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 enter image description here

Upvotes: 2

Views: 27962

Answers (4)

Faruk
Faruk

Reputation: 9

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>
      )
    }

Upvotes: 1

c-chavez
c-chavez

Reputation: 7496

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.

Upvotes: 1

ASHISH R
ASHISH R

Reputation: 4189

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/

Upvotes: 1

Suresh Tamang
Suresh Tamang

Reputation: 52

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

Upvotes: 0

Related Questions