react-native-vector-icons: Cannot load FontAwesome5 or FontAwesome5Pro fonts

I’m having some issues importing react-native-vector-icons when I select FontAwesome5 or FontAwesome5Pro.

Here’s how I’m importing it import FontAwesome5 from 'react-native-vector-icons/FontAwesome5Pro';

Here’s the error message: bundling failed: Error: Unable to resolve module react-native-vector-icons/FontAwesome5Pro from ...: Module react-native-vector-icons/FontAwesome5Pro does not exist in the Haste module map

I’ve tried

npm install react-native-vector-icons
uninstall and use yarn to reinstall
uninstall and run npm to reinstall
reinstall the package via npm/yarn then, react-native start --reset-cache
Executing ./node_modules/.bin/fa5-upgrade from project root directory to upgrade from FontAwesome to FontAwesome5Pro. It shows “No such file or directory” error

Additional notes:

under./node_modules/react-native-vector-icons/Fonts in my project folder, FontAwesome styled fonts (i.e. FontAwesome5_Brands.ttf) is not present.
under./node_modules/react-native-vector-icons/Fonts in my project folder, FontAwesome5.js and FontAwesome5Pro.js is not present

Any suggestion is appreciated.

About this issue

Original URL
State: closed
Created 6 years ago
Comments: 20

Most upvoted comments

I tried it just now, but the issue is still happening on my end. Here’s what I did:

npm uninstall react-native-vector-icon. Verified the package was deleted from node_modules directory.
Added "react-native-vector-icon": "oblador/react-native-vector-icons" to package.json under dependencies property.
npm install
react-native link react-native-vector-icons.

I noticed that when I installed the package using github repo style link, index.js was not under dist directory, leading to error. I modified the package’s package.json to set main property to “index.js” to get my app to load.

AlexWang-16 on Jul 20, 2018

import FontAwesome from 'react-native-vector-icons/FontAwesome5Pro';

Promise.all([
  FontAwesome.getImageSource("angle-left", 38),
  FontAwesome.getImageSource("ellipsis-h", 26)])
      .then(icons => {
          const rightButtons = (this.options.length > 0)? [{ icon: icons[1], id: 'dots' }] : [];
          const leftButtons = [{ icon: icons[0], id: 'back' }];
          this.props.navigator.setButtons({
              rightButtons,
              leftButtons
    });
});

AlexWang-16 on Jul 20, 2018