Importing 'react-native-vector-icon' results 'Unable to resolve module '@expo/vector-icons' error

Question

error: bundling failed: Error: Unable to resolve module `@expo/vector-icons/Ionicons` from `E:\React Projects\Tourism\src\screens\TouristInformation\TouristInformation.js`: Module `@expo/vector-icons/Ionicons` does not exist in the Haste module map

This might be related to https://github.com/facebook/react-native/issues/4968
To resolve try the following:
  1. Clear watchman watches: `watchman watch-del-all`.
  2. Delete the `node_modules` folder: `rm -rf node_modules && npm install`.
  3. Reset Metro Bundler cache: `rm -rf /tmp/metro-bundler-cache-*` or `npm start -- --reset-cache`.
  4. Remove haste cache: `rm -rf /tmp/haste-map-react-native-packager-*`.
    at ModuleResolver.resolveDependency (E:\React Projects\Tourism\node_modules\metro\src\node-haste\DependencyGraph\ModuleResolution.js:139:15)
    at ResolutionRequest.resolveDependency (E:\React Projects\Tourism\node_modules\metro\src\node-haste\DependencyGraph\ResolutionRequest.js:49:18)
    at DependencyGraph.resolveDependency (E:\React Projects\Tourism\node_modules\metro\src\node-haste\DependencyGraph.js:218:16)
    at Object.resolve (E:\React Projects\Tourism\node_modules\metro\src\lib\transformHelpers.js:141:30)
    at dependencies.map.result (E:\React Projects\Tourism\node_modules\metro\src\DeltaBundler\traverseDependencies.js:373:31)
    at Array.map (<anonymous>)
    at resolveDependencies (E:\React Projects\Tourism\node_modules\metro\src\DeltaBundler\traverseDependencies.js:369:18)
    at E:\React Projects\Tourism\node_modules\metro\src\DeltaBundler\traverseDependencies.js:188:33
    at Generator.next (<anonymous>)
    at step (E:\React Projects\Tourism\node_modules\metro\src\DeltaBundler\traverseDependencies.js:298:30)
 BUNDLE  [android, dev] ..\..\../index.js ▓▓▓▓▓▓▓░░░░░░░░░ 48.8% (311/450), failed.

::ffff:127.0.0.1 - - [17/Jan/2019:21:01:47 +0000] "GET /index.delta?platform=android&dev=true&minify=false HTTP/1.1" 500 - "-" "okhttp/3.11.0"

I ejected the project running 'expo eject'. Then I added 'react-native-vector-icon' to use font icons provided by that package. But, whenever I import that library to any of my js file. Though I'm importing 'react-native-vector-icon',it shows the above error.

TouristInformation.js

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  Image,
  View,
} from 'react-native';
import residentBackgroundImage from '../../assets/residentBackground.jpg';
import Icon from 'react-native-vector-icons/Ionicons';
export default class TouristInformation extends Component {
  render() {
    return(
      <View>
        <Image
          source = {residentBackgroundImage}
          style = {styles.image} />
        <Text> Yomuna </Text>
      <Icon name="ios-person" size={30} color="#4F8EF7" />
      </View>
    );
  }
}
const styles = StyleSheet.create({
  image:{

  },
});

Answer 1

Do you have @expo/vector-icons installed as a dependency? If so, it may be conflicting with react-native-vector-icons (react-native-vector-icons is already a dependency of @expo/vector-icons).Since you've already ejected from Expo I'm not sure you want that package installed.

react-native-vector-icons requires you to link native dependencies. The first thing to try is react native link from the terminal. It seems to work better with iOS than with Android. If that doesn't work there are other manual ways to do it.

From the RN docs From the package docs (scroll down to the Android section)

Answer 2

The issue has to do with `babel-preset-expo'.

To resolve, do the following:

• Run yarn remove babel-preset-expo
• Run yarn add metro-react-native-babel-preset
• In your babel.config.js , remove babel-preset-expo from presets, and instead add module:metro-react-native-babel-preset

Your babel.config.js should now look something like this:

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ["module:metro-react-native-babel-preset"],
  };
};

Answer 3

Run the below commands.

npm i react-native-vector-icons
npx react-native link react-native-vector-icons