Module `react-native-vector-icons/Ionicons` does not exist in the Haste module map

Hellooo… I have run commands:

1. npm install react-native-vector-icons --save
2. react-native link

emulator:

Name: Pixel_XL_API_23_React_Native

CPU/ABI: Google APIs Intel Atom (x86_64)

Path: /home/rudi/.android/avd/Pixel_XL_API_23_React_Native.avd

Target: google_apis [Google APIs] (API level 23)

Skin: pixel_xl_silver

SD Card: 100M

hw.dPad: no

hw.lcd.height: 2560

runtime.network.speed: full

hw.accelerometer: yes

hw.device.name: pixel_xl

vm.heapSize: 256

skin.dynamic: yes

hw.device.manufacturer: Google

hw.lcd.width: 1440

hw.gps: yes

hw.initialOrientation: Portrait

image.androidVersion.api: 23

hw.audioInput: yes

image.sysdir.1: system-images/android-23/google_apis/x86_64/

tag.id: google_apis

showDeviceFrame: yes

hw.camera.back: virtualscene

hw.mainKeys: no

AvdId: Pixel_XL_API_23_React_Native

hw.camera.front: emulated

hw.lcd.density: 560

avd.ini.displayname: Pixel XL API 23 React Native

hw.arc: false

hw.gpu.mode: auto

hw.device.hash2: MD5:984dbf66b1aaafcdb7e89573ffb74b46

hw.ramSize: 1536

hw.trackBall: no

PlayStore.enabled: false

fastboot.forceColdBoot: no

hw.battery: yes

hw.cpu.ncore: 4

hw.sdCard: yes

tag.display: Google APIs

runtime.network.latency: none

hw.keyboard: yes

hw.sensors.proximity: yes

disk.dataPartition.size: 800M

hw.sensors.orientation: yes

avd.ini.encoding: UTF-8

hw.gpu.enabled: yes

package.json:

{
  "name": "AwesomeNativeBase",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "native-base": "^2.7.0",
    "react": "16.4.1",
    "react-native": "0.56.0",
    "react-native-vector-icons": "^4.6.0",
    "react-navigation": "^2.6.2"
  },
  "devDependencies": {
    "babel-jest": "23.2.0",
    "babel-preset-react-native": "5.0.2",
    "jest": "23.3.0",
    "react-test-renderer": "16.4.1"
  },
  "jest": {
    "preset": "react-native"
  }
}

App.js

import React from 'react';
import { Text, View } from 'react-native';
import Ionicons from 'react-native-vector-icons/Ionicons';
import { TabNavigator, TabBarBottom } from 'react-navigation'; // Version can be specified in package.json


class HomeScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Home!</Text>
      </View>
    );
  }
}

class SettingsScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Settings!</Text>
      </View>
    );
  }
}

export default TabNavigator(
  {
    Home: { screen: HomeScreen },
    Settings: { screen: SettingsScreen },
  },
  {
    navigationOptions: ({ navigation }) => ({
      tabBarIcon: ({ focused, tintColor }) => {
        const { routeName } = navigation.state;
        let iconName;
        if (routeName === 'Home') {
          iconName = `ios-information-circle${focused ? '' : '-outline'}`;
        } else if (routeName === 'Settings') {
          iconName = `ios-options${focused ? '' : '-outline'}`;
        }

        // You can return any component that you like here! We usually use an
        // icon component from react-native-vector-icons
        return <Ionicons name={iconName} size={25} color={tintColor} />;
      },
    }),
    tabBarComponent: TabBarBottom,
    tabBarPosition: 'bottom',
    tabBarOptions: {
      activeTintColor: 'tomato',
      inactiveTintColor: 'gray',
    },
    animationEnabled: false,
    swipeEnabled: false,
  }
);

And I got error:

The development server returned response error code: 500

URL: http://10.0.2.2:8081/index.delta?platform=android&dev=true&minify=false

Body:
{"originModulePath":"/home/rudi/git/AwesomeNativeBase/App.js","targetModuleName":"react-native-vector-icons/Ionicons","message":"Unable to resolve module `react-native-vector-icons/Ionicons` from `/home/rudi/git/AwesomeNativeBase/App.js`: Module `react-native-vector-icons/Ionicons` does not exist in the Haste module map\n\nThis might be related to https://github.com/facebook/react-native/issues/4968\nTo resolve try the following:\n  1. Clear watchman watches: `watchman watch-del-all`.\n  2. Delete the `node_modules` folder: `rm -rf node_modules && npm install`.\n  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-*`.","errors":[{"description":"Unable to resolve module `react-native-vector-icons/Ionicons` from `/home/rudi/git/AwesomeNativeBase/App.js`: Module `react-native-vector-icons/Ionicons` does not exist in the Haste module map\n\nThis might be related to https://github.com/facebook/react-native/issues/4968\nTo resolve try the following:\n  1. Clear watchman watches: `watchman watch-del-all`.\n  2. Delete the `node_modules` folder: `rm -rf node_modules && npm install`.\n  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-*`."}],"name":"Error","stack":"Error: Unable to resolve module `react-native-vector-icons/Ionicons` from `/home/rudi/git/AwesomeNativeBase/App.js`: Module `react-native-vector-icons/Ionicons` does not exist in the Haste module map\n\nThis might be related to https://github.com/facebook/react-native/issues/4968\nTo resolve try the following:\n  1. Clear watchman watches: `watchman watch-del-all`.\n  2. Delete the `node_modules` folder: `rm -rf node_modules && npm install`.\n  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-*`.\n    at ModuleResolver.resolveDependency (/home/rudi/git/AwesomeNativeBase/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:167:1306)\n    at ResolutionRequest.resolveDependency (/home/rudi/git/AwesomeNativeBase/node_modules/metro/src/node-haste/DependencyGraph/ResolutionRequest.js:80:16)\n    at DependencyGraph.resolveDependency (/home/rudi/git/AwesomeNativeBase/node_modules/metro/src/node-haste/DependencyGraph.js:237:485)\n    at Object.resolve (/home/rudi/git/AwesomeNativeBase/node_modules/metro/src/lib/transformHelpers.js:116:25)\n    at dependencies.map.result (/home/rudi/git/AwesomeNativeBase/node_modules/metro/src/DeltaBundler/traverseDependencies.js:298:29)\n    at Array.map (<anonymous>)\n    at resolveDependencies (/home/rudi/git/AwesomeNativeBase/node_modules/metro/src/DeltaBundler/traverseDependencies.js:294:16)\n    at /home/rudi/git/AwesomeNativeBase/node_modules/metro/src/DeltaBundler/traverseDependencies.js:159:33\n    at Generator.next (<anonymous>)\n    at step (/home/rudi/git/AwesomeNativeBase/node_modules/metro/src/DeltaBundler/traverseDependencies.js:239:307)"}
processBundleResult
    BundleDownloader.java:285
access$200
    BundleDownloader.java:37
onResponse
    BundleDownloader.java:163
execute
    RealCall.java:153
run
    NamedRunnable.java:32
runWorker
    ThreadPoolExecutor.java:1113
run
    ThreadPoolExecutor.java:588
run
    Thread.java:818

[rajtatata]

To everyone having this problem, I solved it by importing from the full node_modules path: import Ionicons from '../node_modules/react-native-vector-icons/Ionicons';

If this fixes your issue, here is something interesting you can do to find out why it was happening. Import both ways import IoniconsA from 'react-native-vector-icons/Ionicons'; import IoniconsB from '../node_modules/react-native-vector-icons/Ionicons';

And Cmd+click / Ctrl+click both import paths, check and see if those files are the same. In my case they were different, the first import was from some file located deep inside my AppData folder in Windows, which was really weird…

[M-Ali-B]

It first asked me to install @expo/vector-icons then for fonts then for assets , I am really depressed about it