React-native-vector-icons: Unable To Resolve Module @expo vector-icons

[Cyber-Tycoon]

I am having this issue. When I include the vector-icon library in the standard form like below:

it gives me below error screen:

and here is the error screen on mobile:

But when import it using absolute path it works fine:

Here is the Package.json file.

{
"scripts": {
"start": "react-native start",
"android": "react-native run-android",
"ios": "react-native run-ios",
"web": "expo start --web"
},
"dependencies": {
"react": "^16.8.3",
"react-dom": "^16.8.6",
"react-native": "^0.59.9",
"react-native-vector-icons": "^6.6.0",
"react-native-web": "^0.11.4",
"react-redux": "^7.1.0",
"redux": "^4.0.1",
"watchman": "^1.0.0"
},
"devDependencies": {
"babel-preset-expo": "^5.2.0"
},
"private": true
}

[A13k2]

I had the same problem, but the exact path didnt work for me. What worked for me is to create a new react native app with react-native init App. Followed by the manual installation in xcode.
One important part that I found is that you should stop metro sometimes and deinstall the app before react-native run-ios.

[Royce]

After running expo eject and then yarn add react-native-vector-navigation etc. I got this same error

error: bundling failed: Error: Unable to resolve module `@expo/vector-icons/MaterialIcons`
from `...`: Module `@expo/vector-icons/MaterialIcons` does not exist in the Haste module map

The problem is in the babel.config.js which was left behind from running expo eject.

@@ -1,6 +0,0 @@
module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
  };
};

In babel-preset-expo, 'react-native-vector-icons' is being mapped to '@expo/vector-icons'.

Solution.

• Remove babel.config.js or remove 'babel-preset-expo' from it.
• Remove babel-preset-expo from packages.json
• Delete the Haste/Metro caches etc. Something like watchman watch-del-all && rm package-lock.json && rm -rf node_modules && rm -rf $TMPDIR/metro-* && rm -rf $TMPDIR/haste-map-* && npm install

[brentvatne]

that works, or you can do expo install @expo/vector-icons

[Sammar-a-dev]

Please help guys
How to solve this issue

Unable to resolve "@expo/vector-icons/Fontisto" from "node_modules/native-base/dist/src/basic/IconNB.js"
Failed building JavaScript bundle.

[hannzern]

Having same issue as Bhammi, same exact one...

[brentvatne]

you need to provide more information if you want some help ;)

here's a guide on how to do that: https://stackoverflow.com/help/mcve

[DavidAPears]

Same issue as @Sammar-a-dev

Unable to resolve "@expo/vector-icons/Fontisto" from "node_modules/native-base/dist/src/basic/IconNB.js"
Failed building JavaScript bundle

[brentvatne]

we haven't added "Fontisto" to @expo/vector-icons yet - pr welcome! https://github.com/expo/vector-icons/

[DavidAPears]

we haven't added "Fontisto" to @expo/vector-icons yet - pr welcome! https://github.com/expo/vector-icons/

Ahhhh! My error came from using this library: https://www.npmjs.com/package/react-native-dynamic-search-bar - which must try to use "Fontisto". Thanks for the heads up. D

[umairsultan]

Simple Solution:
npm i --save-exact [email protected]

[Samacriano]

@umairsultan your solution works perfectly thank you

[pulidlc]

@umairsultan your solution works perfectly thank you

[daoshengmu]

It still happens to me from Unable to resolve "./vendor/react-native-vector-icons/Fonts/AntDesign.ttf" from "node_modules/@expo/vector-icons/build/AntDesign.js".

I checked I do have a vendor/react-native-vector-icons folder under node_modules/@expo/vector-icons/build/.

Below is my dependencies in package.json

 "dependencies": {
    "@expo/vector-icons": "^10.2.0",
    "@react-native-community/async-storage": "^1.6.1",
    "@tensorflow/tfjs": "2.0.0-rc.3",
    "@tensorflow/tfjs-react-native": "0.2.3",
    "async-storage": "^0.1.0",
    "expo": "^37.0.11",
    "expo-camera": "^7.0.0",
    "expo-gl": "^7.0.0",
    "expo-gl-cpp": "^7.0.0",
    "expo-splash-screen": "^0.2.3",
    "expo-updates": "~0.2.0",
    "native-base": "2.13.8",
    "react": "16.8.3",
    "react-native": "0.59.10",
    "react-native-fs": "2.14.1",
    "react-native-unimodules": "^0.5.4",
    "react-native-vector-icons": "^6.6.0"
  }

[brentvatne]

@daoshengmu - i can't reproduce this issue and i don't know why this would be happening. any chance you can share your project or link me to a mcve?

[daoshengmu]

@daoshengmu - i can't reproduce this issue and i don't know why this would be happening. any chance you can share your project or link me to a mcve?

I can't reproduce it now. Thanks for reply.

[gautam-paladiya]

Simple Solution:
npm i --save-exact [email protected]

this can increase size of app because of whole UI library are you installing instead of one package @expo vector-icons

[luismasg]

I ran into this 5 months ago when i was super green.
it disappeared for a while and it's back again.

I upgraded native-base and @expo/vector-icons to latest and fixed
seems like all is good now
yarn upgrade --latest @expo/vector-icons native-base @expo-google-fonts/roboto

[thatchubbydev]

i have tried every solution here...it didnt work
none of them did

Unable to resolve "react-native-vector-icons/dist/FontAwesome" from "componentsListItem.js"

thats my error

[brentvatne]

share your project or a mcve if you're having this issue, and i'd be happy to help. ping me @notbrent on twitter to discuss