I can't use the apploading on my react native. It wont work properly

user_14791303 0
Viewed 10697

I keep getting this error: error screenshot

Here is the code that im using to import my custom google fonts:

import React, { useState } from "react";
import Home from "./screens/home";
import { View } from "react-native";
import * as Font from "expo-font";
import { AppLoading } from "expo";

const getFonts = () =>
  Font.loadAsync({
    "poppins-regular": require("./assets/fonts/Poppins-Regular.ttf"),
    "poppins-bold": require("./assets/fonts/Poppins-Bold.ttf"),
  });

export default function App() {
  const [fontsLoaded, setFontsLoaded] = useState(false);
  if (fontsLoaded) {
    return <Home />;
  } else {
    return (
      <AppLoading startAsync={getFonts} onFinish={() => setFontsLoaded(true)} />
    );
  }
}

Here is my Json Package:

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject"
  },
  "dependencies": {
    "expo": "~40.0.0",
    "expo-splash-screen": "^0.8.1",
    "expo-status-bar": "~1.0.3",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "react-native": "https://github.com/expo/react-native/archive/sdk-40.0.1.tar.gz",
    "react-native-web": "~0.13.12"
  },
  "devDependencies": {
    "@babel/core": "~7.9.0"
  },
  "private": true
}

I can't seem to find the error or fix it. I did this with another project before and it worked. The getting the font info is exactly the same. The only thing i can think of is maybe my packages are outdated atm? but Im not sure which package to even update.

Can someone please help?

react-native reactjs javascript
5 Answers

I can see from your package.json that you are at expo SDK 40 (latest release as of now)

AppLoading has been extracted from the expo package in SDK 40

If you want to use this component, you should run expo install expo-app-loading and import AppLoading from its own package: import AppLoading from 'expo-app-loading';. This is part of an ongoing effort to make the expo package as lightweight as possible.

Check the expo blog here.

Steps:
STEP 1: expo install expo-app-loading

STEP 2:

replace import { AppLoading } from "expo";

by import AppLoading from 'expo-app-loading';

STEP 3: Restart your expo dev server (expo start)

user_117581830

My problem was that the first time reloading the app (with expo), the fonts were not loading.

After deleting, rewriting and saving the fontFamily inside of my StyleSheet, the text was being styled with the right font, as the app updates automatically every time you save a file. I just couldn't make it work at the first load.

I solved the issue by putting a return in front of the Font.loadAsync() function:

const fetchFonts = () => {
  return Font.loadAsync({               // <- add return here
    "open-sans": require("./assets/fonts/OpenSans-Regular.ttf"),
    "open-sans-bold": require("./assets/fonts/OpenSans-Bold.ttf"),
  });
};

Now the AppLoading's startAsync gets the promise correctly and the fonts are loaded right after loading the app, without errors

const [isDataLoaded, setIsDataLoaded] = useState(false);

  if (!isDataLoaded) {
    return (
      <AppLoading
        startAsync={fetchFonts}
        onFinish={() => setIsDataLoaded(true)}
        onError={(err) => console.log(err)}
      />
    );
  }

user_166284230

you have to add the return keyword infront of font.loadAsync

user_155189460

Just a heads up, as of today, using startAsync method is depracted in expo-app-loading, you can use useEffect instead and run your function as you would like and handle all the errors there,

  useEffect(() => {
      const getAsyncData = async () => {
           // Do my async request
           setIsReady(true); 
      }
      getAsyncData ();
   }, [])

Assuming you have something like const [isReady, setIsReady] = useState(false); in your code

user_42022650

for me the following steps result:
STEP 1: stop device
STEP 2: expo install expo-app-loading
STEP 3: add the next line: import AppLoading from 'expo-app-loading';
STEP 4:
if (!isDataLoaded) {
return (
<AppLoading
    startAsync={fetchFonts}
    onFinish={() => setIsDataLoaded(true)}
    onError={(err) => console.log(err)}
    />
  );
}

user_97623460
Related