Please provide the following:
- SDK Version: 33 (upgrading from 32)
- Platforms(ios/android/both): Both
First time posting on the forums. Hi, everybody!
I recently took over an Expo project and through the course of working on it decided it needed to be updated to SKD 33 for BackgroundFetch and Hooks support. The update went off well enough but now I’m having trouble with my custom font imports.
I changed the import to the suggested:
import * as Font from "expo-font";
I’m using an async loader for the font itself with:
_loadResourcesAsync = async () => {
// const { dispatch } = this.props;
const imageAssets = this.cacheImages([
// Pictures
]);
await Promise.all([
Font.loadAsync({
gore: require("../assets/fonts/goreRough.otf"),
verdana: require("../assets/fonts/verdana.ttf"),
verdanaBold: require("../assets/fonts/verdanaBold.ttf"),
"Gill Sans MT Condensed": require("../assets/fonts/gillSansCondensed.ttf"),
"Gill Sans MT Condensed Bold": require("../assets/fonts/gillSansCondensedBold.ttf")
}),
...imageAssets
]);
let localPlayer = await retrieveData("playerInfo");
const dud = {
id: false,
campaignId: false
};
if (!localPlayer) {
localPlayer = dud;
// await this.setState({
// newPlayerModalVisible: true,
// });
} else {
localPlayer = JSON.parse(localPlayer);
}
// await this.setState({ localPlayer });
console.log("LOCAL PLAYER : ", localPlayer);
};
And when the Async loading is finished, an event fires off to change update state to ready with:
_handleFinishLoading = async () => {
Linking.addEventListener("url", event => this.handleOpenURL(event.url));
await this.setState({
isReady: true
});
};
This triggers the render with a conditional:
render() {
// const prefix = Linking.makeUrl("/");
if (this.state.isReady) {
return (...)
The full error log is here:
fontFamily "gore" 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/expo/build/environment/muteWarnings.fx.js:27:24 in error
- node_modules/expo/node_modules/expo-font/build/Font.js:23:16 in processFontFamily
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:3545:38 in diffProperties
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:3419:6 in addNestedProperty
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:3556:8 in diffProperties
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:4003:29 in createInstance
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:14437:12 in completeWork
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:17094:10 in completeUnitOfWork
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:17304:30 in performUnitOfWork
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:17316:41 in workLoop
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:17417:15 in renderRoot
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:18423:17 in performWorkOnRoot
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:18324:24 in performWork
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:18285:14 in performSyncWork
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:18169:19 in requestWork
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:17969:16 in scheduleWork
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:6934:17 in enqueueSetState
- node_modules/react/cjs/react.development.js:335:31 in setState
* src/App.js:144:24 in _callee2$
- node_modules/regenerator-runtime/runtime.js:45:44 in tryCatch
- node_modules/regenerator-runtime/runtime.js:271:30 in invoke
- node_modules/regenerator-runtime/runtime.js:45:44 in tryCatch
- node_modules/regenerator-runtime/runtime.js:135:28 in invoke
- node_modules/regenerator-runtime/runtime.js:170:17 in <unknown>
- node_modules/promise/setimmediate/core.js:45:7 in tryCallTwo
- node_modules/promise/setimmediate/core.js:200:23 in doResolve
- node_modules/promise/setimmediate/core.js:66:12 in Promise
- node_modules/regenerator-runtime/runtime.js:169:27 in callInvokeWithMethodAndArg
- node_modules/regenerator-runtime/runtime.js:192:38 in enqueue
- node_modules/regenerator-runtime/runtime.js:216:8 in async
* src/App.js:141:25 in _callee2
- node_modules/expo/build/launch/AppLoading.js:31:20 in _callee$
- node_modules/regenerator-runtime/runtime.js:45:44 in tryCatch
- ... 14 more stack frames from framework internals
package.json:
{
"main": "src/app.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"eject": "expo eject"
},
"dependencies": {
"buffer": "^5.2.1",
"cloudinary-react": "^1.1.0",
"eslint-plugin-prettier": "^3.1.0",
"expo": "^33.0.0",
"expo-asset": "^6.0.0",
"expo-background-fetch": "^5.0.1",
"expo-font": "^5.0.1",
"expo-keep-awake": "^5.0.1",
"path-parser": "^4.2.0",
"prop-types": "^15.6.2",
"react": "16.8.3",
"react-loading": "^2.0.3",
"react-native": "https://github.com/expo/react-native/archive/sdk-33.0.0.tar.gz",
"react-native-background-fetch": "^2.6.0",
"react-native-background-task": "^0.2.1",
"react-native-dotenv": "^0.2.0",
"react-native-indicators": "^0.13.0",
"react-native-modal": "^7.0.2",
"react-native-pose": "^0.9.1",
"react-native-responsive-screen": "^1.2.0",
"react-navigation": "^3.11.0",
"react-navigation-fluid-transitions": "^0.3.2",
"react-redux": "^6.0.0",
"redux": "^4.0.1",
"redux-logger": "^3.0.6",
"redux-persist": "^5.10.0",
"redux-saga": "^1.0.1",
"socket.io-client": "^2.1.1",
"styled-components": "^4.3.1",
"uuid": "^3.3.2"
},
"devDependencies": {
"babel-eslint": "^10.0.3",
"babel-preset-expo": "^5.0.0",
"eslint": "^6.2.2",
"eslint-config-airbnb": "*",
"eslint-config-prettier": "^6.1.0",
"eslint-plugin-import": "^2.18.2",
"eslint-plugin-jsx-a11y": "*",
"eslint-plugin-react": "*",
"eslint-plugin-react-native": "*",
"husky": "^3.0.4",
"lint-staged": "^9.2.5",
"metro-react-native-babel-preset": "^0.51.1",
"prettier": "1.18.2"
},
"private": true,
"husky": {
"hooks": {
"pre-commit": "lint-staged"
}
},
"lint-staged": {
"*.{js,css,json,md}": [
"prettier --write",
"git add"
],
"*.js": [
"eslint --fix",
"git add"
]
}
}
Custom fonts were working on SDK 32, and now they don’t on SDK 33. I changed the import syntax to accommodate this change and that doesn’t seem to have done anything. Any help would be appreciated. Please ask for more info if you need it. I’m new to forum posting for developer related questions.