expo: SDK36: fontFamily "material-community" is not a system font and has not been loaded through Font.loadAsync
🐛 Bug Report
After upgrading to SDK36 I started getting errors for some of my fonts (material-community and ionicons) that are part of react-native-elements.
fontFamily "material-community" 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.
- node_modules\react-native\Libraries\YellowBox\UI\YellowBoxList.js:59:29 in render
- node_modules\expo\node_modules\expo-asset\build\Asset.js:138:20 in downloadAsync
- node_modules\@expo\vector-icons\build\IconsLazy.js:56:19 in Object.defineProperty$argument_2.get
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:3336:15 in findCurrentHostFiber
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:3250:11 in findCurrentFiberUsingSlowPath
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:3343:5 in findCurrentHostFiber
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:3741:8 in diffProperties
* http://192.168.0.24:19001/node_modules%5Cexpo%5CAppEntry.bundle?platform=android&dev=true&minify=false&hot=false:252900:50 in completeWork
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:19072:10 in renderRoot
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:19044:27 in renderRoot
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:19004:32 in renderRoot
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:18722:11 in runRootCallback
* [native code]:null in renderRoot
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:18400:4 in <anonymous>
* [native code]:null in runRootCallback
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:5348:1 in <anonymous>
* http://192.168.0.24:19001/node_modules%5Cexpo%5CAppEntry.bundle?platform=android&dev=true&minify=false&hot=false:224807:30 in unstable_runWithPriority
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:5338:22 in pushContextProvider
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:5318:5 in processChildContext
* http://192.168.0.24:19001/node_modules%5Cexpo%5CAppEntry.bundle?platform=android&dev=true&minify=false&hot=false:255059:37 in scheduleUpdateOnFiber
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:7491:16 in processUpdateQueue
* http://192.168.0.24:19001/node_modules%5Cexpo%5CAppEntry.bundle?platform=android&dev=true&minify=false&hot=false:261203:37 in setState
* http://192.168.0.24:19001/node_modules%5Cexpo%5CAppEntry.bundle?platform=android&dev=true&minify=false&hot=false:133227:27 in dispatch
- node_modules\@react-navigation\core\lib\module\getChildRouter.js:1:81 in getChildRouter
- node_modules\i18n-js\app\assets\javascripts\i18n.js:950:6 in I18n.strftime
- node_modules\whatwg-fetch\dist\fetch.umd.js:394:6 in Response
* http://192.168.0.24:19001/node_modules%5Cexpo%5CAppEntry.bundle?platform=android&dev=true&minify=false&hot=false:241141:32 in invoke
- node_modules\whatwg-fetch\dist\fetch.umd.js:394:6 in Response
- node_modules\whatwg-fetch\dist\fetch.umd.js:459:7 in Promise$argument_0
- node_modules\whatwg-fetch\dist\fetch.umd.js:469:16 in xhr.onload
* http://192.168.0.24:19001/node_modules%5Cexpo%5CAppEntry.bundle?platform=android&dev=true&minify=false&hot=false:239961:16 in tryCallOne
- node_modules\promise\setimmediate\rejection-tracking.js:19:0 in <global>
* http://192.168.0.24:19001/node_modules%5Cexpo%5CAppEntry.bundle?platform=android&dev=true&minify=false&hot=false:236371:17 in _callTimer
- node_modules\react-native\Libraries\Core\setUpXHR.js:25:0 in <global>
- node_modules\react-native\Libraries\Core\Timers\JSTimers.js:180:31 in _callImmediatesPass
* [native code]:null in callImmediates
* http://192.168.0.24:19001/node_modules%5Cexpo%5CAppEntry.bundle?platform=android&dev=true&minify=false&hot=false:264755:35 in __callImmediates
- node_modules\react-native\Libraries\Performance\Systrace.js:102:19 in setEnabled
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:123:9 in callFunctionReturnResultAndFlushedQueue
- node_modules\react-native\Libraries\Performance\Systrace.js:101:16 in setEnabled
* [native code]:null in flushedQueue
* [native code]:null in invokeCallbackAndReturnFlushedQueue.
Here is how I am using the icons:
<Input
leftIcon={{ type: 'material-community', name: 'racing-helmet', iconStyle: { marginRight: 15 }, color: theme.styles.inputFieldIconColor }}
value={this.state.username}
onChangeText={(text) => { this.setState({ username: text }) }}
/>
Environment
SDK36
expo diagnostics:
Expo CLI 3.11.1 environment info:
System:
OS: Windows 10
Binaries:
Yarn: 1.16.0 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
npm: 6.12.0 - C:\Users\egidi\AppData\Roaming\npm\npm.CMD
IDEs:
Android Studio: Version 3.0.0.0 AI-171.4443003
Steps to Reproduce
Insert this in your code:
import { Input } from 'react-native-elements';
<Input
leftIcon={{ type: 'material-community', name: 'racing-helmet', iconStyle: { marginRight: 15 }, color: theme.styles.inputFieldIconColor }}
value={this.state.username}
onChangeText={(text) => { this.setState({ username: text }) }}
/>
Expected Behavior
No error
Actual Behavior
Reproducible Demo
https://snack.expo.io/r1fiHKCaS Here is the link however I think snack still runs not on SDK36 and thats why it is not breaking.
About this issue
- Original URL
- State: closed
- Created 5 years ago
- Reactions: 11
- Comments: 21
Thanks, this one did the trick
rm -rf node_modules/ && rm -f package-lock.json && rm -f yarn.lock && npm cache verify && npm install && expo r -c
Hey all, I was struggling with this issue as well. I tried the whole rimraf node_modules, clear yarn cache, nuke yarn.lock, reinstall everything and nothing worked.
What finally worked for me was just rerunning
expo install expo-font
. Absolutely no clue why that fixed everything, but it did.@zeritte I’m seeing the same problem. The solution from #6476 didn’t solve the problem for me. It was working fine in v35, but after updating to v36 (using expo upgrade) the app fails to build.
That did the trick for me: rm -rf node_modules/ && rm -f package-lock.json && rm -f yarn.lock && npm cache verify && npm install && expo r -c “expo”: “^37.0.0”, “expo-font”: “~8.1.0” “react-native”: “https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz”,
I am getting the same error as mentioned above and i have tried the solutions above mentioned i.e.
rm -rf node_modules/ && rm -f package-lock.json && rm -f yarn.lock && npm cache verify && npm install && expo r -c
After trying all the above mentioned solutions still the problem exist. Is there any soln for this??Thanks @suitupalex !!!
@suitupalex Thank you so much for writing your reply. For the past few days I have been trying to figure out what I was doing wrong. I upgraded a project and everything worked fine, so I was wondering why my brand new project was causing issues. I should have known to try that!
@suitupalex thank you for your empathy ! it did it !
please search for an issue before opening a ticket. the same: https://github.com/expo/expo/issues/6476