The problem
After upgrading to the latest SDK of expo I received the following error:
fontFamily: "material" is not a system font and has not been loaded through Font.loadAsync.
I am not using "material" font anywhere and I discovered that it's an internal font / dependency of expo font.
My Environment
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
Place of the error where the font might be created by Expo
Path: /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); <------ It looks like it's creating the font here.
//# sourceMappingURL=MaterialIcons.js.map
Steps to Reproduce
Upgrade to latest version of Expo SDK (36.0.2) Add react-native-paper to project Make a sample screen Load custom fonts if needed
Steps I have undertaking already:
- Restarting computer
- Removing cache, 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.
- Tried suggestions in stack overflow similar issue
- Tried suggestions in stack overflow similar issue
Extra information
- Active expo issue: https://github.com/expo/expo/issues/7552
- Active React native issue: https://github.com/callstack/react-native-paper/issues/1768
