fontFamily "Roboto_medium" is not a system font and has not been loaded through Font.loadAsync.

Expo SDK
1

Please provide the following:

  1. SDK Version:40
  2. 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$
2

Hi,

You should try using the useFonts hook. I see that you are using class components , but maybe you can, somehow use it.

For using the Roboto Medium font you would have to do the following in the App.js file:

import React from 'react';
import {
  useFonts,
  Roboto_500Medium
} from '@expo-google-fonts/roboto';

export default function App() {

  let [fontsLoaded] = useFonts({
    Roboto_500Medium
  });

  if (!fontsLoaded) {
    return null;
  }

  return <YourNavigator/>;
}

I have also found a good solution here, on SO

3

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.