React-native-paper: fontFamily "material" is not a system font when using Expo

[connercms]

Environment

Expo SDK 35
react-native-paper 2.16.0

Description

Trying to use react-native-paper components in an expo project, I receive the error "fontFamily "material" is not a system font and has not been loaded through Font.loadAsync.". The docs state that when using expo, there is no need to install vector-icons as it is prepackaged with expo, so I am not sure where the issue lies. I see an open issue for this dating back to earlier this year with no definitive solution but suggesting to load the fonts via await Font.loadAsync({ 'MaterialIcons': require('@expo/vector-icons/fonts/MaterialIcons.ttf') }), but I do not have a fonts directory under vector-icons.

[nsdub]

I hit a similar issue with Font.loadAsync() after upgrading to Expo SDK 35 (and 34). The fix for me was to:

1. Delete node_modules folder: rm -rf node_modules
2. Delete package-lock.json
3. Run npm install

[connercms]

This was actually the fix for me also, I had forgotten to close this issue. Thanks!

[Arjun-Aggarwal]

Hi, I am facing the same issue. I tried removing and reinstalling node_modules; however, it did not work for me

[kevinvugts]

Re-opening this issue as of the newest version it still doesn't work with expo.

REACT NATIVE PAPER VERSISON 3.6.0
EXPO SDK 36.0.2

Step I have undertaking:

• [x] Restarting pc

• [x] Removing cach, node_modules etc and reinstall everything

• [x] 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

• [x] 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