React native : Problem Loading Fonts in a custom Hook - react-native

Question

I am trying To make a custom hook that loads fonts using {useFonts} from expo, so that i wont have to repeat the code evrytime, and here is what I got so far.
import { useFonts } from "expo-font";
export default useAppFonts = () => {
const [loaded] = useFonts({
RobotoSlabBlack: require("../Fonts/RobotoSlab-Black.ttf"),
RobotoSlabBold: require("../Fonts/RobotoSlab-Bold.ttf"),
RobotoSlabExtraBold: require("../Fonts/RobotoSlab-ExtraBold.ttf"),
RobotoSlabExtraLight: require("../Fonts/RobotoSlab-ExtraLight.ttf"),
RobotoSlabThin: require("../Fonts/RobotoSlab-Thin.ttf"),
RobotoSlabRegular: require("../Fonts/RobotoSlab-Regular.ttf"),
});
return loaded;
};
the problem is that it works the first time I load the app but when I reload it stops working and the text reverts back to default fonts.
making a custom text component with the fonts already it came to mind, but it really bothers me that I can't do it like this.
and if its not possible I would like to know that, thank you for anyone with a response.

Answer 1

Use loadAsync instead of useFonts
To loadFonts which I do in all my project is create a folder called hooks where your App.js is located
Then, Install expo-app-loading & expo-font
Then inside hooks folder create a file called useFonts.js
Inside useFonts.js write like this
import * as Font from "expo-font";
export default useFonts = async () => {
await Font.loadAsync({
"Montserrat-Bold": require("../assets/fonts/Montserrat-Bold.ttf")
});
};.
Now in your App.js write like this
import * as Font from 'expo-font';
import AppLoading from 'expo-app-loading';
import React, { useState } from 'react';
import useFonts from './hooks/useFonts';
export default function App() {
const [IsReady, SetIsReady] = useState(false);
const LoadFonts = async () => {
await useFonts();
};
if (!IsReady) {
return (
<AppLoading
startAsync={LoadFonts}
onFinish={() => SetIsReady(true)}
onError={() => {}}
/>
);
}
return <View styles={styles.container}>{/* Your App Code Here */}</View>;
}