Please provide the following:
- SDK Version:40
- Platforms(Android/iOS/web/all):Android
This is how font files uploaded;
import React from "react";
import * as Font from "expo-font";
import { createIconSetFromIcoMoon, Ionicons } from "@expo/vector-icons";
import { Icon } from "galio-framework";
import GalioConfig from "../assets/fonts/galioExtra";
const GalioExtra = require("../assets/fonts/galioExtra.ttf");
const IconGalioExtra = createIconSetFromIcoMoon(GalioConfig, "GalioExtra");
export default class IconExtra extends React.Component {
state = {
fontLoaded: false,
};
async componentDidMount() {
await Font.loadAsync({
Roboto: require("native-base/Fonts/Roboto.ttf"),
Roboto_medium: require("native-base/Fonts/Roboto_medium.ttf"),
GalioExtra: GalioExtra,
});
this.setState({ fontLoaded: true });
}
render() {
const { name, family, ...rest } = this.props;
if (name && family && this.state.fontLoaded) {
if (family === "GalioExtra") {
return <IconGalioExtra name={name} family={family} {...rest} />;
}
return <Icon name={name} family={family} {...rest} />;
}
return null;
}
}
When run the app it throws errors like below, it happened with native-base UI library.
How can I fix this?
fontFamily "Roboto_medium" 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\LogBox\LogBox.js:148:8 in registerError
- node_modules\react-native\Libraries\LogBox\LogBox.js:59:8 in errorImpl
- node_modules\react-native\Libraries\LogBox\LogBox.js:33:4 in console.error
- node_modules\expo\build\environment\react-native-logs.fx.js:27:4 in error
- node_modules\expo-font\build\Font.js:29:16 in processFontFamily
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:3681:14 in diffProperties
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:3553:37 in addNestedProperty
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:3692:40 in diffProperties
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:4015:28 in createInstance
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:14706:39 in completeWork
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:18123:27 in completeUnitOfWork
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:18096:29 in performUnitOfWork
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:18013:38 in workLoopSync
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:17977:18 in renderRootSync
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:17674:33 in performSyncWorkOnRoot
* [native code]:null in performSyncWorkOnRoot
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:5321:31 in runWithPriority$argument_1
- node_modules\scheduler\cjs\scheduler.development.js:653:23 in unstable_runWithPriority
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:5316:21 in flushSyncCallbackQueueImpl
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:5304:28 in flushSyncCallbackQueue
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:17125:30 in scheduleUpdateOnFiber
- node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:7267:16 in classComponentUpdater.enqueueSetState
- node_modules\react\cjs\react.development.js:471:2 in Component.prototype.setState
* App.js:91:2 in App
* http://127.0.0.1:19001/node_modules%5Cexpo%5CAppEntry.bundle?platform=android&dev=true&minify=false&hot=false:134026:35 in startLoadingAppResourcesAsync$