Loading a custom font on React Native Expo gives an error

Question

So I am trying to create an app with React Native Expo CLI. I have installed the blank version. I am trying to import the Open Sans typeface into my application. I have done the following steps so far:

1. Made a folder called "fonts" inside of my "assets" folder, placed the ttf file for Open Sans font inside of it.

2. Added the following code in my App.js file

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

export default class App extends React.Component {
  constructor() {
    super();
    this.state = {
      fontLoaded: false
    };
  }
  async componentDidMount() {
    try {
      await Font.loadAsync({
        'OpenSans': require('./assets/fonts/OpenSans.ttf')
      });
      this.setState({ fontLoaded: true });
    }
    catch( error ) {
      console.log(error)
    }
  }
  render() {
    return(
      <View>
        <Text style={styles.text}>Test</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  text: {
    fontFamily: 'OpenSans',
  }
});

Unfortunately, I'm getting an error and all the solutions that I saw on the internet didn't help me. The error which I get is the following:

fontFamily "OpenSans" 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.
- node_modules\react-native\Libraries\YellowBox\YellowBox.js:59:8 in error
- node_modules\expo\build\environment\muteWarnings.fx.js:27:24 in error
- ... 24 more stack frames from framework internals

Answer 1

You are loading the font after the app is mounted, that why you have that error.

your render method should look something like this:

render() {
    if (!this.state.fontLoaded) {
        return (<View>{/*some loader*/}</View>);
    }
    return(
      <View>
        <Text style={styles.text}>Test</Text>
      </View>
    );
  }