CODEWITHSUNDEEP
react-nativefontsexpo
Sva
Sva

Reputation: 195

Loading custom fonts in React Native is giving error

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

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

But if I dismiss the error I see that the font has loaded.

Here is my code:

    export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {loading: true};
  }

  async componentDidMount() {
    await Font.loadAsync({
      pro: require('./assets/fonts/MavenPro-Regular.ttf'),
      medium: require('./assets/fonts/MavenPro-Medium.ttf'),
    }).then(() => {
      this.setState({loading: false});
    });
  }

  render() {
    return (
      <Provider store={store}>
        <NavigationContainer>
          {
            <Drawer.Navigator
              drawerType={'slide'}
              drawerContent={(props) => <DrawerContent {...props} />}>
              <Drawer.Screen
                name="Home"
                component={HomeStackScreen}
                options={{
                  swipeEnabled: false,
                }}
              />
            </Drawer.Navigator>
          }
        </NavigationContainer>
      </Provider>
    );
  }
}

enter image description here

enter image description here

Upvotes: 1

Views: 2095

Answers (1)

brentvatne
brentvatne

Reputation: 8038

you're not delaying presenting the app based on the loading state, so you are rendering the app before the font has loaded, thus the error.

notice in this example that the AppLoading component is rendered while loading fonts, you can use this if you want, or whatever else you would like to display.

also, not related to your question but fyi you don't need to use then() if you're using await

await doSomething();
this.setState({ done: true });

Upvotes: 1

Related Questions