Fail Importing expo font - react-native

Question

I'm getting this error when trying to import a font with expo font.
null is not an object" (evaluating 'dispatcher.useState')
But the error is for sure related to my font import.
import { NavigationContainer, useNavigation } from '#react-navigation/native';
import { FontAwesome } from '#expo/vector-icons';
import { MaterialCommunityIcons } from '#expo/vector-icons';
import {createStackNavigator} from '#react-navigation/stack';
import { AuthContext } from "./context";
import BottomTabNavigator from "./navigation/tabsNav";
import * as firebase from "firebase";
import Myapp from './instanceFirebase';
import AuthStackScreen from './navigation/authStack';
import { ActivityIndicator } from 'react-native'
import FlashMessage from "react-native-flash-message";
const instanceFirebase = Myapp;
import "firebase/functions";
import "firebase/firestore";
import * as Font from 'expo-font';
console.log("font", Font)
const [fontState, setFontState] = React.useState(false);
const MainStack = createStackNavigator();
const MainStackScreen = () => {
return(
<MainStack.Navigator initialRouteName="mainPage" >
<MainStack.Screen
name="mainPage"
component={BottomTabNavigator} />
</MainStack.Navigator>
)
}
const RootStack = createStackNavigator();
const RootStackScreen = ({ userToken }) => (
<RootStack.Navigator headerMode="none">
{userToken ? (
<RootStack.Screen
name="App"
component={MainStackScreen}
/>
) : (
<RootStack.Screen
headerMode="none"
name="Authstack"
component={AuthStackScreen}
options={{
animationEnabled: false
}}
/>
)}
</RootStack.Navigator>
);
export default function token() {
const [userToken, setUserToken] = React.useState(null);
const Context = {
instanceFirebase: instanceFirebase,
signOut: () => {
setUserToken(null);
},
signIn:() => {
setUserToken(true);
}
}
React.useEffect(() => {
const fetchFont = async () => {
await Font.loadAsync({
Jost: require('./assets/fonts/Jost-Regular.ttf'),
Jost_black: require('./assets/fonts/Jost-Black.ttf')
})
setFontState(true)
}
fetchFont()
firebase.auth().onAuthStateChanged(user => {
if(user){
setUserToken(true)
} else {
setUserToken(null)
}
})
}, [])
if (!fontState) {
return <ActivityIndicator />
} else {
return (
<AuthContext.Provider value={instanceFirebase}>
<NavigationContainer>
<RootStackScreen userToken={userToken} />
<FlashMessage position="top" style={{zIndex:99, flex:1, marginTop:30}}/>
</NavigationContainer>
</AuthContext.Provider>
)
}
}
I checked that expo-font is well import, and it is fine.
I don't understand what is happening, when i comment the code related to the import of the font my app just work. So my error is for sure related to the font import.
I do things correctly ?
Thanks per advance for your help

Answer 1

The right answer from Med El Mobarik:
Indeed i am not supposed to use the useState outside a funcionnal component
const [fontState, setFontState] = React.useState(false);
Nevertheless is there a way to load the font in the root page (at the start of the app/Where the instance of my app is launching) ? I want to avoid to load the font on each page.