reactjs - expo-font not loading in react-native

Question

I am using expo-font for importing two fonts from outside. I used require function to import them. I also imported expo-font and AppLoading from expo. But i am getting an error saying fontFamily "open-sans-bold" is not a system font and has not been loaded through Font.loadAsync.

I have attached my app.js file here I used fontfamily in a different component.

import React, { useState } from "react";
import { StyleSheet, View } from "react-native";

import AppLoading from "expo-app-loading";
import * as Font from "expo-font";

import Header from "./components/Header";
import GameOver from "./screens/GameOver";
import GameScreen from "./screens/GameScreen";
import StartGameScreen from "./screens/StartGameScreen";

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

export default function App() {
  const [userNumber, setUserNumber] = useState();
  const [guessRounds, setGuessRounds] = useState(0);
  const [dataLoaded, setDataLoaded] = useState(false);

  if (!dataLoaded) {
    return (
      <AppLoading
        startAsync={fetchFonts}
        onFinish={() => setDataLoaded(true)}
        onError={(err) => console.log(err)}
      />
    );
  }
  const startGameHandler = (selectedNumber) => {
    setUserNumber(selectedNumber);
  };

  const gameOverHandler = (numOfRounds) => {
    setGuessRounds(numOfRounds);
  };

  const startNewGameHandler = () => {
    setUserNumber("");
    setGuessRounds("");
  };

  let content = <StartGameScreen onStartGame={startGameHandler} />;

  if (userNumber && guessRounds <= 0) {
    content = (
      <GameScreen userChoice={userNumber} onGameOver={gameOverHandler} />
    );
  } else if (guessRounds > 0) {
    content = (
      <GameOver
        onOutput={userNumber}
        numOfGuesses={guessRounds}
        onNewGame={startNewGameHandler}
      />
    );
  }
  return (
    <View style={styles.container}>
      <Header title={"Guess a number"} />
      {content}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

Can anyone tell me possible ways to resolve them. I deleted entire node-modules and again installed npm. I also changed the import names from expo to expo-font

question from:https://stackoverflow.com/questions/66067085/expo-font-not-loading-in-react-native

Answer 1

1. Remove expo-font from package.json
2. Remove node_modules folder, and maybe package-lock.json as well
3. Run expo install expo-font
4. Run npm install

Your project should load the font now.