Error when using code block

[Wepa121]

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

[sturmenta]

The solution is use expo-google-fonts and load in the start of the app

1) npx expo install @expo-google-fonts/courier-prime expo-font 2) use expo-app-loading or expo-splash-screen for show loading while the font is loaded

I preferred to use the splash screen for show loading.

this code is an example using expo-router, if you are not using expo-router, you should do something very similar but in App.js/tsx

import { useCallback } from 'react';
import { Slot } from 'expo-router';
import * as SplashScreen from 'expo-splash-screen';
import { useFonts, CourierPrime_400Regular } from '@expo-google-fonts/courier-prime';

SplashScreen.preventAutoHideAsync();

export default function RootLayout() {
  const [fontsLoaded] = useFonts({ Courier: CourierPrime_400Regular });

  const onLayoutRootView = useCallback(async () => {
    if (fontsLoaded) await SplashScreen.hideAsync();
  }, [fontsLoaded]);

  if (!fontsLoaded) return null;

  return (
      <Slot screenOptions={{ onLayoutRootView }} />
  );
}