Icons are not rendering and receiving fontFamily errors after upgrading to Expo 35

Issue Description

I have upgraded my project to Expo 35, and immediately began seeing fontFamily errors like so:

fontFamily "FontAwesome5Free-Regular" is not a system font and has not been loaded through Font.loadAsync

I believe this is because Expo began splitting their monolith package into separate, use specific packages.

For example, these font packages are now imported as:

import { FontAwesome5, FontAwesome, Ionicons } from "expo-vector-icons";

or

import * as Font from "expo-font";

instead of being brought in with “Expo” itself.

I would assume this is a fairly straightforward fix, to begin using the new API to load fonts.

I see that there are instructions to use Font.loadAsync with something like:

...Ionicons.font

but this also does not work.

Expected behaviour

Fonts load correctly, without error.

Actual behaviour

Fonts error out.

Steps to reproduce

Use Expo 35, and NativeBase ^2.12.0

My dependencies:

  "dependencies": {
    "@babel/plugin-transform-flow-strip-types": "^7.4.4",
    "@blueprintjs/core": "^3.15.1",
    "@types/react": "^16.8.14",
    "@types/react-dom": "^16.8.4",
    "antd": "^3.16.6",
    "axios": "^0.18.0",
    "babel-plugin-import": "^1.11.0",
    "babel-plugin-module-resolver": "^3.2.0",
    "babel-polyfill": "^6.26.0",
    "base-64": "^0.1.0",
    "expo": "^35.0.0",
    "expo-analytics-segment": "~6.0.0",
    "expo-calendar": "~6.0.0",
    "expo-constants": "~6.0.0",
    "expo-font": "~6.0.1",
    "expo-keep-awake": "~6.0.0",
    "expo-location": "~6.0.0",
    "expo-permissions": "~6.0.0",
    "expo-vector-icons": "^10.0.1",
    "formik": "^1.5.8",
    "humps": "^2.0.1",
    "identity-obj-proxy": "^3.0.0",
    "less": "^2.7.2",
    "lodash": "^4.17.11",
    "lodash.memoize": "^4.1.2",
    "moment": "^2.24.0",
    "native-base": "^2.12.1",
    "parcel-bundler": "^1.12.3",
    "prop-types": "^15.7.2",
    "qs": "^6.8.0",
    "react": "16.8.3",
    "react-dom": "^16.8.6",
    "react-formal": "^1.0.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-35.0.0.tar.gz",
    "react-native-autolink": "^1.8.1",
    "react-native-calendars": "^1.210.0",
    "react-native-easy-grid": "^0.2.1",
    "react-native-gesture-handler": "~1.3.0",
    "react-native-reanimated": "~1.1.0",
    "react-native-segmented-control-tab": "^3.4.0",
    "react-native-snap-carousel": "^3.8.0",
    "react-native-storage": "^1.0.1",
    "react-native-uuid": "^1.4.9",
    "react-navigation": "^3.11.1",
    "react-redux": "^7.1.0",
    "react-router-dom": "^5.0.0",
    "react-router-native": "^5.0.0",
    "react-testing-library": "^7.0.1",
    "redux-starter-kit": "^0.5.1",
    "redux-test-utils": "^0.3.0",
    "redux-thunk": "^2.3.0",
    "sentry-expo": "~2.0.0",
    "shared": "^0.2.0",
    "utf8": "^3.0.0",
    "uuid": "^3.3.3",
    "yup": "^0.27.0"
  },

[royracer]

I was seeing the same error (for both fonts and icons) when upgrading to Expo SDK35 (didn’t happen when upgrading previous SDK upgrades). I was able to fix it in my environment by doing the following:

• delete /node_modules folder
• delete package-lock.json
• delete yarn.lock

Then:

• Upgrade/install Expo SDK35 according to their upgrade instructions
• Upgrade expo-font from version 5.0.0 to 7.0.0
• Upgrade expo-cli from version 3.0.10 to 3.1.2 (global)
• Upgrade babel-preset-expo (dev dependency) from 5.0.0 to 7.0.0
• Upgrade native-base from 2.12.1 to 2.13.8

I am not sure exactly where the conflict was but the above worked for me. It seems others are experiencing something similar Expo Issue #5717 - Unrecognized font family on SDK35 and a few in the Expo issue mention NativeBase.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.