adrianhajdin/project_react_native_jobs

Font Apparently not loading?

Opened this issue · 11 comments

AWin23 commented

at main(RootComponent) (http://10.0.1.14:19000/index.bundle//&platform=ios&dev=true&hot=false:84656:28)
ERROR fontFamily "DMRegular" is not a system font and has not been loaded through Font.loadAsync.

I am noticing that my right profile picture is not loading and the location before the continent in the US like

React Developer
/ US

Is not loading. And I keep getting that error that persists on my device for Expo when I run the program, although every thing else seems to be working fine.

frenchfrog22 commented

What is your version of expo-font?

Uninstall expo-font using this command in the terminal:
npm uninstall expo-font

then install this one:
npm install expo-font@11.1.1

AWin23 commented

11.1.1. I will try uninstall and reinstalling

amalendu315 commented

after trying the method you told its still showing the error @frenchfrog22

mtsfy commented

@amalendu315 try: npx expo install expo-font

  • 👍2
  • ❤️2
amalendu315 commented

Ok will do

Uhasith commented

I have the same issue. Both methods not working for me. My version expo-font": "~11.4.0. I did change the version to 11.1.1 too. But No difference.
@AWin23 @frenchfrog22 @4d757365 @amalendu315

ishanaudichya commented

@amalendu315 try: npx expo install expo-font

This works thanks

  • 👍4
mariyazaveri13 commented

@amalendu315 try: npx expo install expo-font

This worked for me Thanks!

  • 👍1
Kapil619 commented

Did anyone find a fix for this issue . I'm facing the same issue .
Did the above 2 methods but no luck.
My expo-font version: "expo-font": "~11.10.2"
.
@AWin23 @frenchfrog22 @4d757365 @amalendu315

There are two scenarios :
When i keep the code as it is like in the _layout.js file for the font loading .
I get a complete white screen.

And another is when i comment out that code for font loading I get this :

Screenshot_1707216223

abelroes commented

I had a similar problem, even after updating expo deps.
This code worked for me:

import { Stack } from 'expo-router';
import { useCallback } from 'react';
import { useFonts } from 'expo-font';
import * as SplashScreen from 'expo-splash-screen';
import { useEffect } from 'react';

const Layout = () => {
    const [fontsLoaded, fontError] = useFonts({
        "DMBold": require('../assets/fonts/DMSans-Bold.ttf'),
        "DMMedium": require('../assets/fonts/DMSans-Medium.ttf'),
        "DMRegular": require('../assets/fonts/DMSans-Regular.ttf')
    })

    useEffect(() => {
        async function prepare() {
            SplashScreen.preventAutoHideAsync();
        }
        prepare();
    })
    
    const onLayoutRootView = useCallback(async () => {
        console.log("Fonts loaded?", fontsLoaded);
        if (fontsLoaded) {
            console.log("Fonts loaded");
            await SplashScreen.hideAsync();
        }
    }, [fontsLoaded, fontError]);
    
    if (!fontsLoaded && !fontError) {
        return undefined;
    }

    return <Stack onLayout={onLayoutRootView}/>;

}

export default Layout;

I don't know much about javascript/React Native yet, but the useEffect hook avoided the frozen blank screen, when I had SplashScreen.preventAutoHideAsync(); outside Layout.

inzamambaig commented

I had a similar problem, even after updating expo deps. This code worked for me:

import { Stack } from 'expo-router';
import { useCallback } from 'react';
import { useFonts } from 'expo-font';
import * as SplashScreen from 'expo-splash-screen';
import { useEffect } from 'react';

const Layout = () => {
    const [fontsLoaded, fontError] = useFonts({
        "DMBold": require('../assets/fonts/DMSans-Bold.ttf'),
        "DMMedium": require('../assets/fonts/DMSans-Medium.ttf'),
        "DMRegular": require('../assets/fonts/DMSans-Regular.ttf')
    })

    useEffect(() => {
        async function prepare() {
            SplashScreen.preventAutoHideAsync();
        }
        prepare();
    })
    
    const onLayoutRootView = useCallback(async () => {
        console.log("Fonts loaded?", fontsLoaded);
        if (fontsLoaded) {
            console.log("Fonts loaded");
            await SplashScreen.hideAsync();
        }
    }, [fontsLoaded, fontError]);
    
    if (!fontsLoaded && !fontError) {
        return undefined;
    }

    return <Stack onLayout={onLayoutRootView}/>;

}

export default Layout;

I don't know much about javascript/React Native yet, but the useEffect hook avoided the frozen blank screen, when I had SplashScreen.preventAutoHideAsync(); outside Layout.

This works fine on android but it is not working on iPhone.

"dependencies": {
    "@expo/vector-icons": "^14.0.0",
    "@react-navigation/native": "^6.0.2",
    "axios": "^1.6.8",
    "expo": "~50.0.14",
    "expo-linking": "~6.2.2",
    "expo-router": "~3.4.8",
    "expo-splash-screen": "~0.26.4",
    "expo-status-bar": "~1.11.1",
    "expo-system-ui": "~2.9.3",
    "expo-web-browser": "~12.8.2",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-native": "0.73.6",
    "react-native-dotenv": "^3.4.11",
    "react-native-safe-area-context": "4.8.2",
    "react-native-screens": "~3.29.0",
    "react-native-web": "~0.19.6",
    "expo-font": "~11.10.3"
  },