Fonts loading, but I need to use Font.loadAsync - react-native

Question

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, Tabs Template with Custom Fonts
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>
);
}
}

Answer 1

Create a folder called hooks where your App.js is located.
Inside that create a file called useFonts.js
Your useFonts.js should look like this -
import * as Font from "expo-font";
const useFonts = async () => {
await 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 useFonts;
Now your App.js should look like this -
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";
import AppLoading from "expo-app-loading";
import useFonts from "./hooks/useFonts";
export default function App() {
const isLoadingComplete = useCachedResources();
const colorScheme = useColorScheme();
const [IsReady, SetIsReady] = useState(false);
const FetchFonts = async () => {
await useFonts();
};
if (!IsReady) {
return (
<AppLoading
startAsync={FetchFonts}
onFinish={() => SetIsReady(true)}
onError={(err) => console.log(err)}
/>
);
}
return (
<SafeAreaProvider>
<Navigation colorScheme={colorScheme} />
<StatusBar />
</SafeAreaProvider>
);
}

Answer 2

I found what I need under ./hooks/useCachedResources.ts
there is already a section that is using await Font.loadAsync
I just needed to add my fonts to that section.