react native expo google font usefont.js text error?

Question

I'm doing a project in react native but i have an issue with my expo google font. I'm pretty new to expo so I have basically no idea on how to fix this bug. The bug only appears on IOS (don't know about android) and works fine on web. The bug appears to be inside useFonts.js which is a file that's part of the expo-google-font.

One of my files using expo-google-font.

import React from "react";
import { Text, TouchableOpacity, Image, StyleSheet } from "react-native";
import { useFonts, Inter_300Light } from "@expo-google-fonts/inter";
import { DefaultWidth } from "./DefaultWidth";

export default function AppleButton() {
  let [fontsLoaded] = useFonts({ Inter_300Light });

  if (!fontsLoaded) {
    return null;
  }

  return (
    <TouchableOpacity style={styles.appleBtnWrapper}>
      <Image
        style={styles.appleBtnImage}
        source={require("../../../assets/third-party-icon/apple.png")}
      />
      <Text style={styles.appleBtnText}>Fortsæt med Apple</Text>
    </TouchableOpacity>
  );
}

const styles = StyleSheet.create({
  appleBtnText: {
    color: "#fff",
    fontWeight: "bold",
    textAlign: "center",
    fontFamily: "Inter_300Light",
    fontSize: 16,
  },
});

The useFonts.js use useEffect. These are the bugs I'm getting:

Here is the useFonts.js

import { useEffect, useState } from 'react';

import { loadAsync } from 'expo-font';

/**
 * Load a map of custom fonts to use in textual elements.
 * The map keys are used as font names, and can be used with `fontFamily: <name>;`.
 * It returns a boolean describing if all fonts are loaded.
 *
 * Note, the fonts are not "reloaded" when you dynamically change the font map.
 *
 * @see https://docs.expo.io/versions/latest/sdk/font/
 * @example const [loaded, error] = useFonts(...);
 */
export function useFonts(map) {
  let [loaded, setLoaded] = useState(false);
  let [error, setError] = useState(null);

  useEffect(() => {
    loadAsync(map)
      .then(() => setLoaded(true))
      .catch(setError);
  }, []);

  return [loaded, error];
}

Here is my App.tsx

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import {registerRootComponent} from 'expo'

import Navigation from './routes'

export default function App() {
  return (
    <Navigation/>
  );
}

registerRootComponent(App);

Answer 1

Firstly install expo-app-loading from here

Then For your fonts create a folder called hooks where your App.js is located and inside that create a file useFonts.js

In useFonts.js write like this -

import * as Font from 'expo-font';
import { Inter_300Light } from '@expo-google-fonts/inter';

export default useFonts = async () => {
  await Font.loadAsync({
    Inter_300Light: Inter_300Light,
  });
};

Your App.tsx should look like this

import { StatusBar } from 'expo-status-bar';
import React, { useState } from 'react';
import { registerRootComponent } from 'expo';
import AppLoading from 'expo-app-loading';
import useFonts from './hooks/useFonts';

import Navigation from './routes';

export default function App() {
  const [IsReady, SetIsReady] = useState(false);

  const FontLoading = async () => {
    await useFonts(); // Font is being loaded here
  };

  if (!IsReady) {
    return (
      <AppLoading
        startAsync={FontLoading}
        onFinish={() => SetIsReady(true)}
        onError={() => {}}
      />
    );
  }

  return <Navigation />;
}

registerRootComponent(App);

Now if you want to use these fonts in any files then just simply write the name of the font. You don't need to Import font in every page

For example, your page which uses fonts should look like this

import React from 'react';
import { Text, TouchableOpacity, Image, StyleSheet } from 'react-native';
import { DefaultWidth } from './DefaultWidth';

export default function AppleButton() {
  return (
    <TouchableOpacity style={styles.appleBtnWrapper}>
      <Image
        style={styles.appleBtnImage}
        source={require('../../../assets/third-party-icon/apple.png')}
      />
      <Text style={styles.appleBtnText}>Fortsæt med Apple</Text>
    </TouchableOpacity>
  );
}

const styles = StyleSheet.create({
  appleBtnText: {
    color: '#fff',
    fontWeight: 'bold',
    textAlign: 'center',
    fontFamily: 'Inter_300Light', // Name of the font..Simple
    fontSize: 16,
  },
});