project_react_native_jobs icon indicating copy to clipboard operation
project_react_native_jobs copied to clipboard

Published 20 hours ago • verified publisher icon adrianhajdin

Font Apparently not loading?

Open AWin23 opened this issue 2 years ago • 11 comments

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.

  • If you intended to use a system font, make sure you typed the name correctly and that it is supported by your device operating system.

  • If this is a custom font, be sure to load it with Font.loadAsync. at RCTText at Text (http://10.0.1.14:19000/index.bundle//&platform=ios&dev=true&hot=false:61284:27) at RCTView at View (http://10.0.1.14:19000/index.bundle//&platform=ios&dev=true&hot=false:48291:43) at RCTView at View (http://10.0.1.14:19000/index.bundle//&platform=ios&dev=true&hot=false:48291:43) at About (http://10.0.1.14:19000/components/jobdetails/about/About.bundle//&platform=ios&hot=false&dev=true&minify=false&modulesOnly=true&runModule=false&shallow=true:12:20) at RCTView at View (http://10.0.1.14:19000/index.bundle//&platform=ios&dev=true&hot=false:48291:43) at RCTScrollContentView at RCTScrollView at ScrollView (http://10.0.1.14:19000/index.bundle//&platform=ios&dev=true&hot=false:49695:36) at ScrollView at RCTSafeAreaView at JobDetails (http://10.0.1.14:19000/index.bundle//&platform=ios&dev=true&hot=false:150490:50) at Route (http://10.0.1.14:19000/index.bundle//&platform=ios&dev=true&hot=false:106594:24) at LocationProvider (http://10.0.1.14:19000/index.bundle//&platform=ios&dev=true&hot=false:107047:25) at Route(job-details/[id]) (http://10.0.1.14:19000/index.bundle//&platform=ios&dev=true&hot=false:106857:24) at StaticContainer (http://10.0.1.14:19000/index.bundle//&platform=ios&dev=true&hot=false:102311:17) at EnsureSingleNavigator (http://10.0.1.14:19000/index.bundle//&platform=ios&dev=true&hot=false:99527:24) at SceneView (http://10.0.1.14:19000/index.bundle//&platform=ios&dev=true&hot=false:102222:22) at RCTView at View (http://10.0.1.14:19000/index.bundle//&platform=ios&dev=true&hot=false:48291:43) at DebugContainer (http://10.0.1.14:19000/index.bundle//&platform=ios&dev=true&hot=false:106266:36) at MaybeNestedStack (http://10.0.1.14:19000/index.bundle//&platform=ios&dev=true&hot=false:103724:23) at RCTView at View (http://10.0.1.14:19000/index.bundle//&platform=ios&dev=true&hot=false:48291:43) at RNSScreen at AnimatedComponent (http://10.0.1.14:19000/index.bundle//&platform=ios&dev=true&hot=false:53446:38) at AnimatedComponentWrapper at Suspender (http://10.0.1.14:19000/index.bundle//&platform=ios&dev=true&hot=false:105884:22) at Suspense at Freeze (http://10.0.1.14:19000/index.bundle//&platform=ios&dev=true&hot=false:105903:23) at DelayedFreeze (http://10.0.1.14:19000/index.bundle//&platform=ios&dev=true&hot=false:105599:22) at InnerScreen (http://10.0.1.14:19000/index.bundle//&platform=ios&dev=true&hot=false:105639:36) at Screen (http://10.0.1.14:19000/index.bundle//&platform=ios&dev=true&hot=false:105818:36) at SceneView (http://10.0.1.14:19000/index.bundle//&platform=ios&dev=true&hot=false:103768:22) at Suspender (http://10.0.1.14:19000/index.bundle//&platform=ios&dev=true&hot=false:105884:22) at Suspense at Freeze (http://10.0.1.14:19000/index.bundle//&platform=ios&dev=true&hot=false:105903:23) at DelayedFreeze (http://10.0.1.14:19000/index.bundle//&platform=ios&dev=true&hot=false:105599:22) at RNSScreenStack at ScreenStack (http://10.0.1.14:19000/index.bundle//&platform=ios&dev=true&hot=false:105616:25) at NativeStackViewInner (http://10.0.1.14:19000/index.bundle//&platform=ios&dev=true&hot=false:103926:22) at RCTView at View (http://10.0.1.14:19000/index.bundle//&platform=ios&dev=true&hot=false:48291:43) at SafeAreaProviderCompat (http://10.0.1.14:19000/index.bundle//&platform=ios&dev=true&hot=false:105393:25) at NativeStackView at PreventRemoveProvider (http://10.0.1.14:19000/index.bundle//&platform=ios&dev=true&hot=false:101336:25) at NavigationContent (http://10.0.1.14:19000/index.bundle//&platform=ios&dev=true&hot=false:102037:22) at anonymous (http://10.0.1.14:19000/index.bundle//&platform=ios&dev=true&hot=false:102048:27) at NativeStackNavigator (http://10.0.1.14:19000/index.bundle//&platform=ios&dev=true&hot=false:97543:18) at anonymous (http://10.0.1.14:19000/index.bundle//&platform=ios&dev=true&hot=false:106543:38) at Layout (http://10.0.1.14:19000/index.bundle//&platform=ios&dev=true&hot=false:146017:44) at Route (http://10.0.1.14:19000/index.bundle//&platform=ios&dev=true&hot=false:106594:24) at LocationProvider (http://10.0.1.14:19000/index.bundle//&platform=ios&dev=true&hot=false:107047:25) at Route() (http://10.0.1.14:19000/index.bundle//&platform=ios&dev=true&hot=false:106857:24) at RootRoute (http://10.0.1.14:19000/index.bundle//&platform=ios&dev=true&hot=false:116625:118) at InitialRootStateProvider (http://10.0.1.14:19000/index.bundle//&platform=ios&dev=true&hot=false:113218:24) at EnsureSingleNavigator (http://10.0.1.14:19000/index.bundle//&platform=ios&dev=true&hot=false:99527:24) at BaseNavigationContainer (http://10.0.1.14:19000/index.bundle//&platform=ios&dev=true&hot=false:98114:28) at ThemeProvider (http://10.0.1.14:19000/index.bundle//&platform=ios&dev=true&hot=false:103189:21) at NavigationContainerInner (http://10.0.1.14:19000/index.bundle//&platform=ios&dev=true&hot=false:107154:26) at NavigationContainer (http://10.0.1.14:19000/index.bundle//&platform=ios&dev=true&hot=false:107098:50) at RootRouteNodeProvider (http://10.0.1.14:19000/index.bundle//&platform=ios&dev=true&hot=false:110792:23) at ContextNavigator (http://10.0.1.14:19000/index.bundle//&platform=ios&dev=true&hot=false:116607:24) at RNCSafeAreaProvider at SafeAreaProvider (http://10.0.1.14:19000/index.bundle//&platform=ios&dev=true&hot=false:104576:24) at RCTView at View (http://10.0.1.14:19000/index.bundle//&platform=ios&dev=true&hot=false:48291:43) at GestureHandlerRootView at GestureHandler at ExpoRoot (http://10.0.1.14:19000/index.bundle//&platform=ios&dev=true&hot=false:116594:24) at App at withDevTools(App) (http://10.0.1.14:19000/index.bundle//&platform=ios&dev=true&hot=false:145675:27) at ErrorToastContainer (http://10.0.1.14:19000/index.bundle//&platform=ios&dev=true&hot=false:145599:24) at ErrorOverlay at RCTView at View (http://10.0.1.14:19000/index.bundle//&platform=ios&dev=true&hot=false:48291:43) at RCTView at View (http://10.0.1.14:19000/index.bundle//&platform=ios&dev=true&hot=false:48291:43) at AppContainer (http://10.0.1.14:19000/index.bundle//&platform=ios&dev=true&hot=false:48168:36) at main(RootComponent) (http://10.0.1.14:19000/index.bundle//&platform=ios&dev=true&hot=false:84656:28)

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.

AWin23 avatar Jul 23 '23 02:07 AWin23

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 [email protected]

frenchfrog22 avatar Jul 30 '23 13:07 frenchfrog22

11.1.1. I will try uninstall and reinstalling

AWin23 avatar Aug 13 '23 23:08 AWin23

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

amalendu315 avatar Sep 22 '23 06:09 amalendu315

@amalendu315 try: npx expo install expo-font

mtsfy avatar Sep 22 '23 17:09 mtsfy

Ok will do

amalendu315 avatar Sep 22 '23 17:09 amalendu315

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

Uhasith avatar Sep 23 '23 15:09 Uhasith

@amalendu315 try: npx expo install expo-font

This works thanks

ishanaudichya avatar Sep 26 '23 09:09 ishanaudichya

@amalendu315 try: npx expo install expo-font

This worked for me Thanks!

mariyazaveri13 avatar Jan 19 '24 06:01 mariyazaveri13

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

Kapil619 avatar Feb 06 '24 10:02 Kapil619

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.

abelroes avatar Feb 27 '24 18:02 abelroes

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"
  },

inzamambaig avatar Apr 04 '24 13:04 inzamambaig