How to use FontAwesome in your React Native applications (iOS and Android)

Usage is pretty simple these days thanks for huge efforts made by the very talented engineers working on React Native.

Here are the direct steps for using FontAwesome in your react native apps.

chevronLeft being used in a simple react native app.

Install react-native-fontawesome

entria/react-native-fontawesome

yarn add react-native-fontawesome

This gives you nice components that reference the fontawesome font. You just call the icon that you want using your JSX.

import FontAwesome, { Icons } from "react-native-fontawesome";
<FontAwesome>{Icons.chevronLeft}</FontAwesome>

Pretty tidy.

We still need to actually install the font file though. That’s the next step.

Install the FontAwesome font file in your react native project.

Download the 4.7.0 version of FontAwesome, and when you open the folder you will see a .ttf font, this is the font we need to copy over to our project.

Rename this file to FontAwesome.ttf

Now go to your React Native project and create a folder at the root called assets/fonts/ and drop the file there. Here’s what your folder structure should look like:

Use react-native link to let your mobile apps use the font file properly.

Open up package.json and add a new entry at the root level called rnpm. Add this:

...
},
"rnpm": {
  "assets": [
    "./assets/fonts"
  ]
},
"jest": {
  ...

Make sure it’s at the root level of the configuration object.

At this stage, I would highly recommend a git commit. Things can go wrong and hunting down exactly what happened is a HUGE pain without the git to revert. COMMIT NOW.

Did you commit? Good.

Now run the react-native link command in your terminal.

You can use git status to learn what this command did to your ios and android projects, it’s really nifty!

Restart your simulators and bundlers and you’re done!

You should now see the chevron in both apps.