Follow

Follow
How to add custom fonts to your React Native project with Expo and React Navigation!

How to add custom fonts to your React Native project with Expo and React Navigation!

Bemoore's photo
Bemoore
·Sep 17, 2020·

3 min read

Image for post

Photo by Amador Loureiro on Unsplash


To achieve our goal, we will take the following steps :

  • Generate a new test project with Expo-CLI.
  • Install and import react-navigation, react-navigation-stack modules.
  • Create 2 screens and display some dummy text.
  • Download a Font and add it to the project.
  • Import and use loadAsync helper from Expo
  • Wire up the newly added font and use it in the project.

  1. Generate a new Expo project :

Head over to a directory of your choice and run :

with npx: npx expo-cli init test-custom-font

with expo-cli: expo init test-custom-font

2. Install the dependencies

run the following to install react-navigation dependencies :

`npm i react-navigation react-navigation-stack react-navigation-gesture-handler``

While the installation is running, let’s open the project and add some boilerplate.

3. Create the screens and display some text

To keep this article short, i will skip the how-to-create-and-import-export-your-components section, and head over to the adding the Font.

At this point, your files should look like this :

App.js

HomeScreen.js

DetailScreen.js

Let’s start the development server and see what we have for now,

Image for post

Image for post

3. Download a Font and add it to the project.

  • Inside the assets folder, create a fonts folder.
  • Head over to google fonts .
  • Download and unzip a font of your choice in any location on your machine.
  • Copy/paste the .ttf file inside the fonts folder.
  • In this demo we will use “montserrat”.

By now, our project structure should look like this :

Image for post

Image for post

4. Import Expo Font module and wire up the custom font

Now, here is the fun part, according to Expo documentation, loading a custom font should be done using componentDidMount() life cycle method in App.js.

The current implementation of our App.js does not support a life cycle method, as the root component (App.js line 11)is created and exported immediately.

Likely for us, the only thing Expo expects from our App.js is a valid React component.

So let’s build and export a custom App component with our loaded font.

Your App.js should look like this now,

5. Use the newly added font :

Now, all we have to do is add the font family to our style object, in both HomeScreen.js and DetailScreen.js :

`textStyle:{ fontFamily:'Montserrat'}``

Result :

Image for post

Image for post

You like this type of content or have any suggestions? Find me on twitter

Thank you!

 
Share this