Adding Custom font family to react native Text not working

Question

I am currently trying to add a custom font to a react native app but after trying almost all answers i could find on SO and on google, it still doesn't work.

i tried to make react native aware of the font by add

"rnpm": {
"assets": [
  "./assets/fonts/"
]

},

to the package.json and then running react-native link and also using the re-run commad. But still doesn't work.

Below is the code

app.js

import React, { useEffect } from 'react';
import { StyleSheet, Text, View, Image } from 'react-native';
import imager from './assets/cars.png';
import * as Font from 'expo-font';

export default function App() {
  useEffect(() => {
    async function loadFont() {
      return await Font.loadAsync({
        righteous: require('./assets/fonts/Righteous-Regular.ttf'),
      });
    }
    loadFont();
  }, []);

  return (
    <View style={styles.container}>
      <Image style={styles.imager} source={imager} />
      <Text
        style={{
          fontSize: 30,
          fontWeight: 'bold',
          paddingTop: 30,
          fontFamily: 'righteous',
        }}
      >
        Request Ride
      </Text>
      <Text style={{ fontSize: 15, padding: 40, textAlign: 'center' }}>
        Request a ride and get picked up by a nearby community driver
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  imager: {
    width: 200,
    height: 200,
    shadowColor: 'rgba(0, 0, 0, 0.2)',
    shadowRadius: 10,
    shadowOpacity: 1,
  },
 });

I have the font Righteous-Regular.ttf in ./assets/fonts but when i run this code, i get this error

fontFamily "righteous" is not a system font and has not been loaded through Font.loadAsync.

• If you intended to use a system font, make sure you typed the name correctly and that it is supported by your device operating system.

• If this is a custom font, be sure to load it with Font.loadAsync.

I researched but still can't find the solution to this. Please what could be the issue and how do i go about it?

Answer 1

You are trying to use the font before the font is loaded. You need to do something like this.

import React, { useEffect, useState } from 'react';
import { StyleSheet, Text, View, Image } from 'react-native';
import imager from './assets/cars.png';
import * as Font from 'expo-font';

export default function App() {
  // use state for font status.
  const [isFontReady, setFontReady] = useState(false)

  useEffect(() => {
    async function loadFont() {
      return await Font.loadAsync({
        righteous: require('./assets/fonts/Righteous-Regular.ttf'),
      });
    }
    // after the loading set the font status to true
    loadFont().then(() => {
      setFontReady(true)
    });
  }, []);

  return (
    <View style={styles.container}>
      <Image style={styles.imager} source={imager} />
      {/* render the text after loading */}
      {isFontReady && <Text
        style={{
          fontSize: 30,
          fontWeight: 'bold',
          paddingTop: 30,
          fontFamily: 'righteous',
        }}
      >
        Request Ride
      </Text>}
      <Text style={{ fontSize: 15, padding: 40, textAlign: 'center' }}>
        Request a ride and get picked up by a nearby community driver
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  imager: {
    width: 200,
    height: 200,
    shadowColor: 'rgba(0, 0, 0, 0.2)',
    shadowRadius: 10,
    shadowOpacity: 1,
  },
 });

It is up to you to display the element after the font is installed or to display it with a different font before.

Answer 2

Are you using react-native greater than or equal to 0.60? What you have done has worked in my project, but my project is below react-native 0.60. Above 0.60, apparently you have to change react-native.config.js instead of changing package.json. Here is a link to a tutorial that goes over that difference. It is in steop 3 of the tutorial: https://medium.com/@mehran.khan/ultimate-guide-to-use-custom-fonts-in-react-native-77fcdf859cf4