Update: While running expo start, the fonts are displayed correctly. However, when following the recommended method of using npx expo start, the fonts do not load properly. I even tried integrating Google Fonts using '@expo-google-fonts/montserrat'
I have experimented with various approaches to display the fonts correctly. It works fine with JavaScript but encounters issues in TSX as shown below:
if (!fontsLoaded) {
return null;
}
The app fails to load and only displays a blank white screen. Upon removing if (!fontsLoaded) {return null;}, the following error message appears:
"fontFamily "Inter-Black" is not a system font and has not been loaded through Font.loadAsync."
Even after trying the specified solution from the expo.dev website, I faced the same issue and error.
The current configuration I am working with includes:
import React, { useEffect, useCallback } from 'react';
import { LogBox } from 'react-native';
import * as SplashScreen from 'expo-splash-screen';
// import 'react-native-gesture-handler';
import { NavigationContainer } from '@react-navigation/native';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import { useFonts } from 'expo-font';
import HomeNavigator from './src/routes/app.routes';
export default function App() {
LogBox.ignoreLogs(["Sending..."]);
useEffect(() => {}, []);
const [fontsLoaded] = useFonts({
'Thin': require('./assets/fonts/Montserrat-Thin.ttf'),
'Light': require('./assets/fonts/Montserrat-Light.ttf'),
'ExtraLight': require('./assets/fonts/Montserrat-ExtraLight.ttf'),
'Regular': require('./assets/fonts/Montserrat-Regular.ttf'),
'Medium': require('./assets/fonts/Montserrat-Medium.ttf'),
'Semibold': require('./assets/fonts/Montserrat-SemiBold.ttf'),
'Bold': require('./assets/fonts/Montserrat-Bold.ttf'),
'Black': require('./assets/fonts/Montserrat-Black.ttf')
});
const onLayoutRootView = useCallback(async () => {
if (fontsLoaded) {
await SplashScreen.hideAsync();
}
}, [fontsLoaded]);
if (!fontsLoaded) {
return null;
}
return (
<SafeAreaProvider>
<NavigationContainer>
<HomeNavigator />
</NavigationContainer>
</SafeAreaProvider>
);
}
A different approach provided by Expo included:
import { useCallback } from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { useFonts } from 'expo-font';
import * as SplashScreen from 'expo-splash-screen';
SplashScreen.preventAutoHideAsync();
export default function App() {
const [fontsLoaded] = useFonts({
'Inter-Black': require('./assets/fonts/Montserrat-Black.ttf'),
});
const onLayoutRootView = useCallback(async () => {
if (fontsLoaded) {
await SplashScreen.hideAsync();
}
}, [fontsLoaded]);
if (!fontsLoaded) {
return null;
}
return (
<View style={styles.container} onLayout={onLayoutRootView}>
<Text style={{ fontFamily: 'Inter-Black', fontSize: 30 }}>Inter Black</Text>
<Text style={{ fontSize: 30 }}>Platform Default</Text>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
});