fontFamily "material" is not a system font and has not been loaded through Font.loadAsynch.

🐛 Bug Report

Environment

Environment ** React Native version: “react-native”: “https://github.com/expo/react-native/archive/sdk-36.0.1.tar.gz”, REACT NATIVE PAPER VERSISON 3.6.0 EXPO SDK 36.0.2

   System:
     OS: macOS 10.15.4
     Shell: 5.7.1 - /bin/zsh
   Binaries:
     Node: 13.12.0 - /usr/local/bin/node
     Yarn: 1.22.4 - /usr/local/bin/yarn
     npm: 6.14.4 - ~/.npm/bin/npm
     Watchman: 4.9.0 - /usr/local/bin/watchman
   IDEs:
     Xcode: 11.0/11A420a - /usr/bin/xcodebuild
   npmPackages:
     expo: ^36.0.2 => 36.0.2 
     react: ^16.13.1 => 16.13.1 
     react-native: https://github.com/expo/react-native/archive/sdk-36.0.1.tar.gz => 0.61.4 
     react-navigation: ^4.3.5 => 4.3.6 
   npmGlobalPackages:
     expo-cli: 3.16.1

Expo Client on iOS device

Steps to Reproduce

1. Upgrade to latest version of Expo SDK (36.0.2)
2. Add react-native-paper to project
3. Make a sample screen
4. Load custom fonts if needed

Expected Behavior

It should work and not complain about third party fonts which are located in node_modules. It should use custsom font when used with Font.loadAsynch()

Actual Behavior

I receive the following

fontFamily "material" is not a system font and has not been loaded through Font.loadAsync.

It’s not my font and probably a third party font which is bundled in expo’s module. See below.

Step I have undertaking:

• Restarting pc

• Removing cach, node_modules etc and reinstall everything

• Try to link to the node modules font and load it in expo’s loadAsync function like here https://github.com/oblador/react-native-vector-icons/issues/789#issuecomment-554675931

• Import font ttf file in local src and link to it with absolute path.

None of the above seems te work and the material font is used in the internals of react-native-paper

/Users/kevin/Enorm/xclsv-500/node_modules/@expo/vector-icons/build/MaterialIcons.js

import createIconSet from './createIconSet';
import font from './vendor/react-native-vector-icons/Fonts/MaterialIcons.ttf';
import glyphMap from './vendor/react-native-vector-icons/glyphmaps/MaterialIcons.json';
export default createIconSet(glyphMap, 'material', font);
//# sourceMappingURL=MaterialIcons.js.map

_Originally posted by @kevinvugts in https://github.com/callstack/react-native-paper/issues/1347#issuecomment-606694962_

I understand that bugs without reproducible code have low priority. Tho i am not able to create one since this is a private project. Hopefully someone has experienced this before. Thanks for any help. Really appreciate it. ❤️

[NikkiDelRosso]

I spent a few frustrating hours after upgrading from Expo 39 to Expo 40 on this one. I had initially resolved the issue by installing expo-font separately and adding a postinstall script to remove the ./node_modules/expo/node_modules/expo-font folder, as suggested in a forum post linked above.

However, I finally solved the issue without the postinstall workaround after I noticed this warning:

Some of your project's dependencies are not compatible with currently installed expo package version:
 - expo-font - expected version range: ~8.4.0 - actual version installed: ^9.0.0
Your project may not work correctly until you install the correct versions of the packages.
To install the correct versions of these packages, please run: expo install [package-name ...]

npm install expo-font had added v9.0.0 and this was causing Expo to install a second font package, which seemed to cause a conflict. Deleting my node_modules folder and installing expo-font@~8.4.0 resolved the problem and the need for the postinstall script was no longer necessary. Presumably, I could have avoided this if I had used expo install expo-font in the first place.

–

TL;DR: It seems like there are various things that can cause the “font has not been loaded” error message. Make sure you have the right version of expo-font installed for your version of Expo if other solutions here aren’t working.

[AakashPat]

I have been having the exact same problem. Tried all solutions from all forums. Nothing works.