React Native Expo Not Loading Fonts

Question

React Native newb here!

I am trying to use a custom font in my react native app using expo. I tried following the instructions at https://docs.expo.io/versions/latest/guides/using-custom-fonts.html#using-custom-fonts with no luck.

Here is my App.js:

import React from 'react';
import { View, Text, TouchableOpacity, TextInput, StyleSheet, AsyncStorage, Alert, Platform, NativeModules } from 'react-native';
import { Expo } from 'expo';

import { StackNavigator } from 'react-navigation';
import LoginScreen from './src/views/LoginScreen';
import AuthenticatedScreen from './src/views/AuthenticatedScreen';

import './ReactotronConfig'

import styles from './src/styles/ParentStyles'

const { StatusBarManager } = NativeModules;

const RootStack = StackNavigator(
    {
        Login: { screen: LoginScreen },
        Authenticated: { screen: AuthenticatedScreen }
    },
    { initialRouteName: 'Login'}
);

const STATUSBAR_HEIGHT = Platform.OS === 'ios' ? 20 : StatusBarManager.HEIGHT;

export default class App extends React.Component {
    state = {
        fontLoaded: false,
    };

    async componentDidMount() {
        await Expo.Font.loadAsync({
            'open-sans-bold': require('./src/assets/fonts/OpenSans-Bold.ttf'),
        });
        console.log('running')
        this.setState({ fontLoaded: true });
    }

  render() {
    console.log('statusBarHeight: ' + StatusBarManager.HEIGHT);
    return (<RootStack />);
  }
}

console.disableYellowBox = true;

I am trying to call open-sans-bold in my login page like so:

render() {
    return (
        <View style = { parentStyles.container } >
            <View style={ loginStyles.backgroundImageContainer }>
                <Image style={ loginStyles.backgroundImage } source={require('../assets/img/splash.png')} />
            </View>
            <View style={ loginStyles.logoImageContainer } >
                <Image style={ loginStyles.logoImage } source={require('../assets/img/PMlogo.png')} resizeMode="contain"/>
            </View>
            <View style={{flex: 50 }} >
                //***CALLING FONT HERE*** 
                <Text style={{ fontFamily: 'open-sans-bold', fontSize: 56 }}>Email</Text>
                <TextInput style = {loginStyles.input}
                    underlineColorAndroid = "transparent"
                    placeholder = "Email"
                    placeholderTextColor = "red"
                    autoCapitalize = "none"
                    ref = { input => { this.textInputEmail = input }}
                    onChangeText = { this.handleEmail }/>

                <TextInput style = { loginStyles.input }
                    underlineColorAndroid = "transparent"
                    placeholder = "Password"
                    placeholderTextColor = "red"
                    autoCapitalize = "none"
                    ref = { input => { this.textInputPassword = input }}
                    onChangeText = { this.handlePassword }/>

                <TouchableOpacity
                    style = {loginStyles.submitButton}
                    onPress = { () => this.login(this.state.email, this.state.password) }
                    >
                    <Text style = { loginStyles.submitButtonText }> Login </Text>
                </TouchableOpacity>
            </View>
        </View>
    )

}

Unfortunately, when I run this I get the following error:

fontFamily 'open-sans-bold' is not a system font and has not been loaded through Expo.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 Expo.Font.loadAsync.

Any help is super appreciated!!

Answer 1

If you are using expo, you should import Font and AppLoading like this:

import { Font, AppLoading } from "expo";

in the next step, create a constant in your root component (not in the component block, maybe on the top of the rootcomponent) as below :

const fetchFonts = () => {
  return Font.loadAsync({
    "open-sans": require("./assets/fonts/OpenSans-Regular.ttf"),
    "open-sans-bold": require("./assets/fonts/OpenSans-Bold.ttf")
  });
};

now in the root component :

export default function App() {
  const [fontLoaded, setFontLoaded] = useState(false);
  if (!fontLoaded) {
    return (
      <AppLoading
        startAsync={fetchFonts}
        onFinish={() => {
          setFontLoaded(true);
        }}
      />
    );
  }

  return (
    <Provider store={store}>
      <ShopNavigator />
    </Provider>
  );
}

your root component (App.js in my cade) should be like this at the end, just for adapting :

import React, { useState } from "react";
import { createStore, combineReducers } from "redux";
import { Provider } from "react-redux";
import { Font, AppLoading } from "expo";
import productsReducer from "./store/reducers/products";
import ShopNavigator from "./navigation/ShopNavigator";

const rootReducer = combineReducers({
  products: productsReducer
});

const store = createStore(rootReducer);

const fetchFonts = () => {
  return Font.loadAsync({
    "open-sans": require("./assets/fonts/OpenSans-Regular.ttf"),
    "open-sans-bold": require("./assets/fonts/OpenSans-Bold.ttf")
  });
};

export default function App() {
  const [fontLoaded, setFontLoaded] = useState(false);

  if (!fontLoaded) {
    return (
      <AppLoading
        startAsync={fetchFonts}
        onFinish={() => {
          setFontLoaded(true);
        }}
      />
    );
  }

  return (
    <Provider store={store}>
      <ShopNavigator />
    </Provider>
  );
}

Answer 2

Please upgrade your expo by using below command

expo upgrade

Expo should be greater than 36.0.0 or else try with npm install expo@36.0.1

Answer 3

For some weird reason functional component approach didn't work for me, I needed to change to a class component.

Here's a minimum working example based on React Native Cookbook:

import React from 'react';
import { AppLoading } from 'expo';
import * as Font from 'expo-font';
import YourComponent from 'path/to/component';


export default class App extends React.Component {
  state = {
    fontLoaded: false
  };

  async componentDidMount() {
    await Font.loadAsync({
      'open-sans': require('./assets/fonts/OpenSans-Regular.ttf'),
      'open-sans-bold': require('./assets/fonts/OpenSans-Bold.ttf')
    });
    this.setState({ fontLoaded: true });
  }

  render() {
    return this.state.fontLoaded ? <YourComponent /> : <AppLoading />;
  }
}

Note: using componentWillMount could throw an error since it's not guaranteed to wait for our Font.loadAsync to finish. Also, using componentDidMount won't block initial rendering of the app.

Answer 4

Hey bro this is work correctly code for app.js, just adapt for your case

import React from "react";
import { AppLoading, Font } from "expo";
import { StyleSheet, Text, View } from "react-native";

 export default class App extends React.Component {
     state = {
       loaded: false,
     };

     componentWillMount() {
       this._loadAssetsAsync();
     }

     _loadAssetsAsync = async () => {
       await Font.loadAsync({
         diplomata: require("./assets/fonts/DiplomataSC-Regular.ttf"),
       });
       this.setState({ loaded: true });
     };

     render() {
       if (!this.state.loaded) {
         return <AppLoading />;
       }

     return (
      <View style={styles.container}>
        <Text style={styles.info}>
          Look, you can load this font! Now the question is, should you use it?
          Probably not. But you can load any font.
        </Text>
      </View>
      );
     }
    }

  const styles = StyleSheet.create({
       container: {
         flex: 1,
         backgroundColor: "#fff",
         alignItems: "center",
         justifyContent: "center",
         padding: 30,
       },
       info: {
         fontFamily: "diplomata",
         textAlign: "center",
         fontSize: 14,
       },
   });