Adding Custom Fonts In Expo React-Native.

Introduction

If you are a beginner to expo react-native there are a lot of things you might find very difficult doing and not to talk about unavailability of resources to help. These problems may include how to use custom fonts in your project.
Do not worry. Here, I will try my very best to teach you the easiest way to do so.
Expo by default supports all google fonts. You didn't pick your custom fonts from there? Well, there's still a way to use them in your projects. Let's learn how.

Prerequisites

1. A fair knowledge of react-native.
2. A simple react native setup.

Adding Google Fonts

• Install the font package by using the syntax 'expo install @expo-google-fonts/{name_of_font}'. In this example I will be using the montseratt font. So we can install with the command expo install @expo-google-fonts/montserrat.

• The code below demonstrates how you should add the font you just downloaded to your project.
  

import React from 'react'
import { Text, StyleSheet, View } from 'react-native'
import {useFonts, Montserrat_400Regular} from '@expo-google-fonts/montserrat'

export default function ExpoCustomFonts() {

    const [fontsLoaded] = useFonts({
        Montserrat_400Regular
    })

    if(!fontsLoaded){

        return null

    }else{

        return (
            <View style={styles.container}>

                <Text style={styles.text}>
                    Hello react native
                </Text>

            </View>
        )

    }

}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center',
    },
    text: {
        fontSize: 32,
        fontFamily: 'Montserrat_400Regular', 
        color: "#1DA1F2",
    }
})

What's happening in the code?

• From line 1 to line 3 we import all the resources needed for this project.
• In line 3, we import two things, the font style we want to use and a very important hook, the useFonts hook, I will soon explain what this hook does. For now lets proceed.
• In line 5, we declare and export the component ExpoCustomFonts.
• Line 7 to line 9 is where all the fun begins, here we tell react-native to load our montseratt font. We do this by using the react hook; useFonts. Its job is to load a map of fonts and return the boolean true if it does so successfully or an error if it doesn't. We save the return value in the constant fontsLoaded.
• Finally, we check if our font was loaded successfully. If yes, we return a component containing the text styled with the montserrat font. If not, we return null. Certainly, this is not advisable in real world. In the real world, you would want to return a component which has not been styled with the custom font. This way, you indirectly tell react-native to use the default fonts provided on whichever platform your application will run on.

Adding any other font

The steps in doing so is quite similar to what we did with the google fonts. Only in this case you direct react-native to where in the project structure you have fonts saved. By convention and good practice's sake, you should save your fonts in 'assets/fonts' directory.
The implementation is demonstrated below;

import * as React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { useFonts } from 'expo-font';

export default function App() {
  const [loaded] = useFonts({
    Montserrat: require('./assets/fonts/Montserrat.ttf'),
  });

  if (!loaded) {
    return null;
  }

  return (
    <View style={styles.container}>
      <Text style={styles.text}
      >Montserrat</Text>
    </View>
  );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center',
    },
    text: {
        fontSize: 30,
        fontFamily: 'Montserrat', 
        color: "#1DA1F2",
    }
})

Conclusion

So that's pretty much it. I hope you find this useful and not hesitate to share. Please drop a like if this was useful and helped you solve a problem. Thank you😊.