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

image

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

Most upvoted comments

please search for an issue before opening a ticket. the same: #6476

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