CODEWITHSUNDEEP
react-nativeexpo
Muhammad Rafeh Atique
Muhammad Rafeh Atique

Reputation: 872

Getting error while loading the fonts in Expo App

I was working on my project & I stuck on loading the Fonts, it gives me a error that this not exists. You can look at the code below;

import { StatusBar } from 'expo-status-bar';
import React, { useState } from 'react';
import { StyleSheet, View } from 'react-native';

// import { useFonts } from "@use-expo/font";
import {useFonts} from 'expo-font';
import AppLoading from 'expo-app-loading'

import Header from './components/Header';
import EndGameScreen from './screens/EndGameScreen';
import GameScreen from './screens/GameScreen';
import StartGameScreen from './screens/StartGameScreen';

function App() {

  const [userNumber, setUserNumber] = useState();
  const [rounds, setRounds] = useState(0)

  let [fontsLoaded] = useFonts({
    'Inter-Black': require('./assets/fonts/OpenSans-Regular.tff')
  });

  if (!fontsLoaded) {
    return <AppLoading />;
  }

  const configureNewGameHandler = () => {
    setRounds(0);
    setUserNumber(null);
  };

  const startGameHandler = (selectedNumber) => {
    setUserNumber(selectedNumber);
    setRounds(0);
  }

  const onGameEndHandler = rounds => {
    setRounds(rounds);
  }

  let content = <StartGameScreen onStartGame={startGameHandler}/>;
  
  if (userNumber && rounds <= 0) {
     content = <GameScreen userChoice={userNumber} onGameEnd={onGameEndHandler}/>
  } else if (userNumber && rounds > 0) {
    content = <EndGameScreen 
                roundsNumber={rounds} 
                userNumber={userNumber} 
                onRestart={configureNewGameHandler}
              />
  }
  
  return (
    <View style={styles.screen}>
      <Header title="Guess a Number" />
      {content}
    </View>
  );
}

export default App;

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

Errors that I am getting is shown below;

enter image description here

Even the path of my local files is correct too, you can see below;

enter image description here

Can Someone Help me with it, I shall be very thankful to you for this!!!

Upvotes: 1

Views: 308

Answers (1)

Luka
Luka

Reputation: 1008

You have a typo in the line 'Inter-Black': require('./assets/fonts/OpenSans-Regular.tff')

replace .tff with .ttf

P.S. You haven't provided the screenshot with the visible font file names in your file explorer. My answer is based on the fact that the most common font extensions/formats are .ttf (TrueType) & .otf (OpenType).

Upvotes: 2

Related Questions