Why won't Font Awesome icons load in my React Native Expo app?

Question

I'm trying to integrate Font Awesome into a React Native Expo app that I'm working on, but I keep getting the following error:

console.error: "ERROR: icon not found for icon = ", "coffee"

I'm just following the instructions on the following GitHub page for React Native Font Awesome: https://github.com/FortAwesome/react-native-fontawesome

Specifically, first, I ran the following commands:

npm i --save react-native-svg #
npm i --save @fortawesome/fontawesome-svg-core
npm i --save @fortawesome/free-solid-svg-icons
npm i --save @fortawesome/react-native-fontawesome

Those all ran fine. Then I added the following to my home screen code:

import { FontAwesomeIcon } from '@fortawesome/react-native-fontawesome';
...
<FontAwesomeIcon icon="coffee" />

Again, I'm just following the instructions on the GitHub page linked to above. When I do all that though, I get the error noted above. Accordingly to my package.json, I'm on expo version ~36.0.0.

Any ideas? Thank you very much in advance.

Tried it in snack its not loading. So added fontawesome icons via react native vector icons and its working perfectly Example : https://snack.expo.io/@msbot01/moody-strawberries — Pramod, Mar 31 '20 at 15:19
I ran `npm install --save react-native-vector-icons`, then `react-native link`. Everything said it was successful. I then added `import Icon from 'react-native-vector-icons/FontAwesome';`, which worked, but when I did ` `, I got the following error: `console.error: "fontFamily "FontAwesome" is not a system font and has not been loaded through Font.loadAsync. ...`. Any ideas? Thank you. — HartleySan, Mar 31 '20 at 17:27
Hey sebastian... here is related thread (let me know if this dosen't help) ---------->https://github.com/oblador/react-native-vector-icons/issues/789 — Pramod, Mar 31 '20 at 18:21
I tried what they recommended, which was deleting the `node_modules` folder and trying `npm i` again, but it just seemed to make things worse. After doing that, I got the following message when I ran `npm start`: `Some of your project's dependencies are not compatible with currently installed expo package version: - react-native-svg - expected version range: 9.13.3 - actual version installed: ^12.0.3 Your project may not work correctly until you install the correct versions of the packages. To install the correct versions of these packages, please run: expo install [package-name ...]` — HartleySan, Mar 31 '20 at 20:59
So I then ran the following: `expo install react-native-svg`. And now, when I even try to import `@fortawesome/react-native-fontawesome`, then I then the following error: `Error: Requiring unknown module "undefined". If you are sure the module exists, try restarting Metro. You may also want to run 'yarn' or 'npm install'.` Any ideas? — HartleySan, Mar 31 '20 at 21:01
Decided to run an `npm start -c` this time, and now, I get the following error with the same code: `Unable to resolve module './elements/ForeignObject' from 'node_modules\react-native-svg\src\ReactNativeSVG.ts': ...`. Any ideas? — HartleySan, Mar 31 '20 at 21:08
From thread you had to add this line ----> import FontAwesome from '../node_modules/@expo/vector-icons/build/vendor/react-native-vector-icons/Fonts/FontAwesome.ttf'; — Pramod, Apr 01 '20 at 14:36

score 2 · Answer 1 · answered Mar 31 '20 at 15:15

2

import {faCoffee} from "@fortawesome/free-solid-svg-icons";

<FontAwesomeIcon icon={faCoffee} />

answered Mar 31 '20 at 15:15

Sebastian Godja

39
5

This did not work for me. Just gave me a new, different error. Sorry. – HartleySan Mar 31 '20 at 17:25
what was the error? have you tried to delete the app and build it again? – Sebastian Godja Mar 31 '20 at 18:23

score 0 · Answer 2 · answered Apr 01 '20 at 15:34

I figured it out. It was "easy", but also not so obvious.

Basically, because I'm using Expo to build my React Native app, I had to use the Expo version of Font Awesome. As such, I didn't need any of those npm modules I installed before. They could all be uninstalled.

In place of those modules, I added the following at the top of my file:

import { FontAwesome } from '@expo/vector-icons';

And then the following to get a Font Awesome icon to show up on the screen:

<FontAwesome name="times" />

That's all there was to it. I guess I was fundamentally taking the wrong approach to begin with. Sorry for all the confusion. Thanks again to everyone that helped.

Why won't Font Awesome icons load in my React Native Expo app?

2 Answers2