reactjs - How to fix Unrecognised Font Family in expo-font?

Question

I have been staring at my code for ages trying to work out what is wrong and haven't been successful.

Essentially, I am trying to use custom fonts local in my assets/fonts folder, however they do not load properly. I end up with an unrecognised font error when I try to use them.

Here is my code:

import React from "react";
import Navigation from "./navigation";
import AppLoading from "./screens/AppLoading";
import { useFonts } from "expo-font";

export default function App() {
  let [fontLoaded] = useFonts({
    MainFont: require("./assets/fonts/Montserrat.ttf"),
    MainFontSemiBold: require("./assets/fonts/Montserrat-Medium.ttf"),
    MainFontBold: require("./assets/fonts/Montserrat-SemiBold.ttf"),
  });

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

  return <Navigation />;
}

And the paths are perfect.

Can anyone provide some suggestions to fix my problem.

package.json

{
  "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": {
    "@react-native-community/masked-view": "^0.1.10",
    "expo": "~40.0.0",
    "expo-app-loading": "^1.0.1",
    "expo-font": "~8.4.0",
    "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-gesture-handler": "~1.8.0",
    "react-native-reanimated": "~1.13.0",
    "react-native-safe-area-context": "^3.1.9",
    "react-native-screens": "~2.15.0",
    "react-native-svg": "12.1.0",
    "react-native-svg-transformer": "^0.14.3",
    "react-native-web": "~0.13.12",
    "react-navigation": "^4.4.3",
    "react-navigation-stack": "^2.10.2"
  },
  "devDependencies": {
    "@babel/core": "~7.9.0"
  },
  "private": true
}

Answer 1

等待大神答复