Can't resolve Font Awesome modules in React Native

Question

I am trying to get Font Awesome icons running my React Native application by following the instructions posted here. However, after completing the instructions, my simulator doesn't load the application and the command line gives me the following error:

error: bundling failed: Error: While trying to resolve module `@fortawesome/fontawesome-svg-core` from file `/Users/agaidis/Auto-ID-Lab/AudioApp/App.js`, the package `/Users/agaidis/Auto-ID-Lab/AudioApp/node_modules/@fortawesome/fontawesome-svg-core/package.json` was successfully found. However, this package itself specifies a `main` module field that could not be resolved (`/Users/agaidis/Auto-ID-Lab/AudioApp/node_modules/@fortawesome/fontawesome-svg-core/index.js`. Indeed, none of these files exist:

  * `/Users/agaidis/Auto-ID-Lab/AudioApp/node_modules/@fortawesome/fontawesome-svg-core/index.js(.native||.ios.js|.native.js|.js|.ios.json|.native.json|.json)`
  * `/Users/agaidis/Auto-ID-Lab/AudioApp/node_modules/@fortawesome/fontawesome-svg-core/index.js/index(.native||.ios.js|.native.js|.js|.ios.json|.native.json|.json)`
    at ResolutionRequest.resolveDependency (/Users/agaidis/Auto-ID-Lab/AudioApp/node_modules/metro/src/node-haste/DependencyGraph/ResolutionRequest.js:92:15)
    at DependencyGraph.resolveDependency (/Users/agaidis/Auto-ID-Lab/AudioApp/node_modules/metro/src/node-haste/DependencyGraph.js:237:485)
    at Object.resolve (/Users/agaidis/Auto-ID-Lab/AudioApp/node_modules/metro/src/lib/transformHelpers.js:116:25)
    at dependencies.map.result (/Users/agaidis/Auto-ID-Lab/AudioApp/node_modules/metro/src/DeltaBundler/traverseDependencies.js:298:29)
    at Array.map (<anonymous>)
    at resolveDependencies (/Users/agaidis/Auto-ID-Lab/AudioApp/node_modules/metro/src/DeltaBundler/traverseDependencies.js:294:16)
    at /Users/agaidis/Auto-ID-Lab/AudioApp/node_modules/metro/src/DeltaBundler/traverseDependencies.js:159:33
    at Generator.next (<anonymous>)
    at step (/Users/agaidis/Auto-ID-Lab/AudioApp/node_modules/metro/src/DeltaBundler/traverseDependencies.js:239:307)
    at /Users/agaidis/Auto-ID-Lab/AudioApp/node_modules/metro/src/DeltaBundler/traverseDependencies.js:239:467
 BUNDLE  [ios, dev] ../../index.js ░░░░░░░░░░░░░░░░ 0.0% (0/1), failed.

My code is as follows:

App.js

import React, {Component} from 'react';
import {AppRegistry} from 'react-native';
import MainApp from './src/components/MainApp';
import AudioExample from './src/components/AudioExample';

// For icons we use font awesome
import { library } from '@fortawesome/fontawesome-svg-core';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faStroopwafel } from '@fortawesome/free-solid-svg-icons';

library.add(faStroopwafel)

AppRegistry.registerComponent('audioApp', () => MainApp);

export default MainApp;

Relevant piece of LangPage.js:

import React from 'react'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import {View, Text, StyleSheet, Picker} from 'react-native'
import PropTypes from 'prop-types'
import Menu from './Menu'

class LangPage extends React.Component{
    static propTypes = {
        List: PropTypes.array.isRequired,
        passFunc: PropTypes.func.isRequired,
    }
    render(){
        return(
            <View style={styles.container}>
                <View style={styles.boxContainers}>
                    <FontAwesomeIcon icon="stroopwafel" />
                    <Text style={styles.header}>Select a Language</Text>
                </View>
                <View style={[styles.boxContainers, styles.menuBox]}>
                    <Menu givenL={this.props.List} selectFunc={this.props.passFunc}/>
                </View>
            </View>
            )
    }
}

For reference, I am using:

"@fortawesome/fontawesome-svg-core": "^1.2.0-14",
"@fortawesome/free-solid-svg-icons": "^5.1.0-11",
"@fortawesome/react-fontawesome": "0.1.0-11",
"i": "^0.3.6",
"npm": "^6.3.0",
"react": "16.4.1",
"react-native": "0.56.0"

Any thoughts on how I could fix this? Thanks!

Answer 1

Good morning,

I strongly recommend you to use the react-native-vectors-icons library instead of directly using fontAwesome. It may be why it doesn't work. For more informations, click here.

EDIT: You need to import the react-native-vector-icons in your dependencies. Go in your package.json file and type this line in the 'dependencies' section :

"react-native-vector-icons": "^4.5.0",

In your LangPage.js file, you will be able to import them like this :

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

With that done, you will be able to display easily icons from font-awesome in your react native components, just like that :

<Icon
   color={Colors.primaryBackground}
   name={stroopwafel}
   size={40}
/>

Hope it helped :)

Have a good day