Add custom font to your React Native Expo App(Updated April 2023)

Expo makes it easier to add custom fonts in our React Native Apps. Let’s see how.
Check the complete code here: https://github.com/hemanshum/demo-app

Preparation

Open your project in your code editor and the terminal to run the below command.

# npx expo install expo-font
# npx expo install expo-splash-screen

Once done, we can write code to add our favorite fonts to our project.

I downloaded Extra Bold, Bold and Medium font-weight of Montserrat font from google fonts. https://fonts.google.com/specimen/Montserrat

I create a fonts folder in the assets folder in our project and put all the font files there:

Screenshot of fonts folder from VS Code editor

This is the default fonts look without adding any custom fonts:

Default Font

Open the App.js file in your code editor from the project folder:

It will look something like this:

Let’s import the “useFonts” hook from expo-font and “SplashScreen” package in our project:

import { useFonts } from 'expo-font';
import * as SplashScreen from 'expo-splash-screen';

• the useFont hook will help us load the fonts for our project.
• expo-splash-screen will help us keep showing the SplashScreen until the fonts get loaded.

Configuration

Now let’s write some code to use the above packages to configure the fonts used in our project.

1. First, we will prevent SplashScreen from auto-hide

SplashScreen.preventAutoHideAsync();

2. Add useFonts hook

const [isLoaded] = useFonts({
    "mrt-mid": require("./assets/fonts/Montserrat-Medium.ttf"),
    "mrt-bold": require("./assets/fonts/Montserrat-Bold.ttf"),
    "mrt-xbold": require("./assets/fonts/Montserrat-ExtraBold.ttf"),
  });

Let’s understand the code

useFonts return us a boolean and take an object with a list of fonts. Here we are using a boolean as isLoaded, it will be true when fonts are loaded.
Now let's see the font object:

1. The first part is the name given by me, which I will use in the App to use that particular font-weight
2. 2nd part is we need to require the path where the font file is located

Now if you run the app you will see the App is stuck on SplashScreen only, because SplashScreen.preventAutoHideAsync();is preventing the SplashScreen to autohide.

Now we will write a function to hide the SplashScreen once fonts are loaded.

const handleOnLayout = useCallback(async () => {
    if (isLoaded) {
      await SplashScreen.hideAsync(); //hide the splashscreen
    }
  }, [isLoaded]);

To call the above function we are going to use onLayout event provided for “View” component, this event is fired immediately once the layout has been calculated but not yet rendered.

So when the function handleOnLayout is called it will check if the isLoaded is true and then hide the SplashScreen. We put our function inside useCallback hook so it should run once and not run every time the component rerendered.

Awesome, fonts are configured to be used in the App. But before using it we need to add a check.

 if (!isLoaded) {
    return null;
  }

This check will show null(or you can use a loading screen), whenever app is reloaded and will not try to render the component and execute the handleOnLayout function. If you don’t add that check the fonts will not load when the app is reloaded.

Now we are all set to use the Fonts.

Let’s use the newly added fonts 😃

You can see the new font applied to the text.
Check the complete code here: https://github.com/hemanshum/demo-app

That’s it!
Thank You.