fontFamily is not a system font and has not been loaded through Font.loadAsync But with Font.loadAsync

Question

I'm learning react native by creating some projects.

I got stuck and unable to load custom fonts. I've followed this guide from expo docs. but I'm getting an error

fontFamily "raleway-bold" is not a system font and has not been loaded through Font.loadAsync.

Then I have use this Font.loadAsync in my code but I still get the same error.

Any suggestions?

import React, { useState } from 'react';
import Home from './screens/Home';
import AppLoading from 'expo-app-loading';
import * as Font from 'expo-font';

const getFonts = () =>
  Font.loadAsync({
    'raleway-regular': require('./assets/fonts/Raleway-Regular.ttf'),
    'raleway-bold': require('./assets/fonts/Raleway-Bold.ttf'),
  });

export default function App() {
  const [fontsLoaded, setFontsLoaded] = useState(false);

  if (fontsLoaded) {
    return <Home />;
  } else {
    return (
      <AppLoading
        startAsync={getFonts}
        onFinish={() => setFontsLoaded(true)}
        onError={console.warn}
      />
    );
  }
}

Answer 1

This is an expo client and AppLoading bug GitHub issue

You can try an alternative approach and not use AppLoading as below

  useEffect(() => {
    async function getFonts() {
      await fetchFonts();
      setFontLoaded(true);
    }
    getFonts();
  }, []);
 
  if (!fontLoaded) {
    return (
      <View>
        <Text>Loading...</Text>
      </View>
    );
  }