Expo Fonts loading incorrectly

Question

I am using expo fonts to load in fonts and I came across a new error out of the blue: "You started loading the font but used it before it finished loading." I'm not sure where the issue is coming from. I tried loading the font in app:

import * as Font from "expo-font";
export default class App extends React.Component {
  async componentDidMount() {
    await Font.loadAsync({
      "open-sans-bold": require("./assets/Fonts/OpenSans-Bold.ttf")
    });
  }



  render() {
    return (
      <Provider store={store}>

          <View style={styles.container}>
            <StatusBar barStyle="dark-content" />
            <AppContainer />
          </View>

      </Provider>
    );
  }
}

However, the error persists

Answer 1

The error appears because you render your app before the font is loaded. You need to render another <View> Before it ends. You can modify your code with that:

import React from 'react-native';
import { Text, StyleSheet, View, ActivityIndicator } from 'react-native';

import * as Font from 'expo-font';
export default class App extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            fontLoaded: false   
        };
    }

    async componentDidMount() {
        await Font.loadAsync({
            'open-sans-bold': require('./assets/Fonts/OpenSans-Bold.ttf')
        }).then(() => {
            // When the font is loaded you can rendered your app
            this.setState({
                fontLoaded: true
            });
        });
    }

    render() {
        const { fontLoaded } = this.state;

        // When your font is not loaded you display a Loading Component
        if (!fontLoaded) {
            return (
                <View style={styles.container}>
                    <ActivityIndicator size="large" color="#0000ff" />;
                </View>
            );
        } else {
            return (
                <Provider store={store}>
                    <View style={styles.container}>
                        <StatusBar barStyle="dark-content" />
                        <AppContainer />
                    </View>
                </Provider>
            );
        }
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignIems: 'center'
    }
});