Add custom font to the React Native Application - Version 0.60

Question

I am using React Native (V-0.64). I used the method of downloading and adding the custom font in the assets folder and creating a react-native.config.js file and export the link from there. But I keep getting the following error when I run the app on the device. COdes in the file

module.exports = {
  assets: ['./assets/fonts'],
};

Then run the npx react-native link to link the assets into the android and iOS files. But I keep getting the following error in the lines and do not get the font changes in the Text

fontFamily "VeganStylePersonalUse-5Y58" 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 node_modules/expo-font/build/Font.js:27:16 in processFontFamily
at [native code]:null in commitRootImpl
at [native code]:null in performSyncWorkOnRoot
at [native code]:null in forEach
at node_modules/react-native/Libraries/Core/setUpReactRefresh.js:43:6 in Refresh.performReactRefresh
at [native code]:null in callFunctionReturnFlushedQueue

I tried lots of things but did not work. Please help.

user_13170636 · Answer

To loadFonts which I do in all my project is create a folder called hooks where your App.js is located

Then, Install expo-app-loading & expo-font

Then inside hooks folder create a file called useFonts.js

Inside useFonts.js write like this

import * as Font from "expo-font";

export default useFonts = async () => {
   await Font.loadAsync({
      "Montserrat-Bold": require("../assets/fonts/Montserrat-Bold.ttf"),
    });
};.

Now in your App.js write like this

import * as Font from 'expo-font';
import AppLoading from 'expo-app-loading';
import React, { useState } from 'react';

import useFonts from './hooks/useFonts';

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

  const LoadFonts = async () => {
    await useFonts();
  };

  if (!IsReady) {
    return (
       SetIsReady(true)}
        onError={() => {}}
      />
    );
  }

  return {/* Code Here */};
}

Add custom font to the React Native Application - Version > 0.60

1 Answers