React Native Expo - Custom Fonts Not Loading With Font.loadasync

I'm up to date on the latest Expo version but for some reason, I can not get a simple custom font going. Here is a fresh project I set up attempting to get a custom font installed.

Solution 1:

You have to await the loading fucntion

const fetchFonts = async () =>
  awaitFont.loadAsync({
    'Inter-Black': require('./assets/fonts/Inter-Black.otf'),
  });

Also, instead of this, try creating a custom hook to Load fonts. Check this answer.

You can do it somenthing like this

Create a folder called hooks where your App.js is located. Then inside hooks folder create a file called useFonts.js

Inside useFonts.js write like this

import * asFontfrom"expo-font";
 
exportdefault useFonts = async () =>
  awaitFont.loadAsync({
    'Inter-Black': require('./assets/fonts/Inter-Black.otf'),
  });

Now in your App.js write like this

import * asFontfrom'expo-font';
importAppLoadingfrom'expo-app-loading';
importReact, { useState } from'react';

import useFonts from'./hooks/useFonts';

exportdefaultfunctionApp() {
  const [IsReady, SetIsReady] = useState(false);

  constLoadFonts = async () => {
    awaituseFonts();
  };

  if (!IsReady) {
    return (
      <AppLoadingstartAsync={LoadFonts}onFinish={() => SetIsReady(true)}
        onError={() => {}}
      />
    );
  }

  return<Viewstyles={styles.container}>{/* Code Here */}</View>;
}