Font.loadAsync in React Native Expo

[TurtleWolf1]

I’m trying to add a custom font to ReactNative using Expo
the fonts are actually showing up ok for now, but I keep getting a warning that I should use Font.loadAsync, I’ve tried to adapt what’s in the docs to the tabbed template and watched a few tutorials, most recently Maximillian’s on Udemy feels the closest… but even though I’m using Font.loadAsync I’m still getting the same warning.

Repo, Custom Fonts in Tabs Template

    import { StatusBar } from 'expo-status-bar';
    import React, { useState } from 'react';
    import { SafeAreaProvider } from 'react-native-safe-area-context';
    
    import useCachedResources from './hooks/useCachedResources';
    import useColorScheme from './hooks/useColorScheme';
    import Navigation from './navigation';
    
    // expo install expo-app-loading
    import AppLoading from 'expo-app-loading';
    // import { AppLoading } from 'expo';
    
    // import { useFonts } from 'expo-font';
    import * as Font from 'expo-font';
    
    const fetchFonts = () => {
      return Font.loadAsync({
        'CharterBold': require('./assets/fonts/CharterBold.otf'),
        'CharterBoldItalic': require('./assets/fonts/CharterBoldItalic.otf'),
        'CharterItalic': require('./assets/fonts/CharterItalic.otf'),
        'CharterRegular': require('./assets/fonts/CharterRegular.otf'),
        'SpaceMono': require('./assets/fonts/SpaceMono-Regular.ttf'),
      })
    }
    
    export default function App() {
      const isLoadingComplete = useCachedResources();
      const colorScheme = useColorScheme();
      const [fontsLoaded, setFontsLoaded] = useState(false)
    
      // const [loaded] = useFonts({
      //   CharterBold: require('./assets/fonts/CharterBold.otf'),
      //   CharterBoldItalic: require('./assets/fonts/CharterBoldItalic.otf'),
      //   CharterItalic: require('./assets/fonts/CharterItalic.otf'),
      //   CharterRegular: require('./assets/fonts/CharterRegular.otf'),
      //   SpaceMono: require('./assets/fonts/SpaceMono-Regular.ttf'),
      // });
    
      if (!fontsLoaded) {
        return (
          <AppLoading
            startAsync={fetchFonts}
            onFinish={() => setFontsLoaded(true)}
            onError={(err) => console.log(err)}
          />
        );
      }
      if (!isLoadingComplete) {
        return null;
      } else {
        return (
          <SafeAreaProvider>
            <Navigation colorScheme={colorScheme} />
            <StatusBar />
          </SafeAreaProvider>
        );
      }
    }

[TurtleWolf1]

I found that in this template, it’s best to add the fonts under useCachedResources.tsx