fontFamily "Roboto_medium" is not a system font and has not been loaded through Font.loadAsync.,how to fix that?

user_15799554 0
Viewed 989

I am getting below error during launch of expo app. This question is not new but the old solutions are not working.

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.
at node_modules\react-native\Libraries\LogBox\LogBox.js:148:8 in registerError
at node_modules\react-native\Libraries\LogBox\LogBox.js:59:8 in errorImpl
at node_modules\react-native\Libraries\LogBox\LogBox.js:33:4 in console.error
at node_modules\expo\build\environment\react-native-logs.fx.js:27:4 in error
at node_modules\expo-font\build\Font.js:27:16 in processFontFamily
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:3681:14 in diffProperties
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:3692:40 in diffProperties
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:4015:28 in createInstance
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:14706:39 in completeWork
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:18123:27 in completeUnitOfWork
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:18096:29 in performUnitOfWork
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:18013:38 in workLoopSync
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:17977:18 in renderRootSync
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:17674:33 in performSyncWorkOnRoot
at [native code]:null in performSyncWorkOnRoot
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:5321:31 in runWithPriority$argument_1
at node_modules\scheduler\cjs\scheduler.development.js:653:23 in unstable_runWithPriority
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:5316:21 in flushSyncCallbackQueueImpl
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:5304:28 in flushSyncCallbackQueue
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:17125:30 in scheduleUpdateOnFiber
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:20527:14 in updateContainer
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:21068:17 in render
at node_modules\react-native\Libraries\ReactNative\renderApplication.js:54:4 in renderApplication
at node_modules\react-native\Libraries\ReactNative\AppRegistry.js:117:25 in runnables.appKey.run
at node_modules\react-native\Libraries\ReactNative\AppRegistry.js:213:4 in runApplication
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:416:4 in __callFunction
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:109:6 in __guard$argument_0
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:364:10 in __guard
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:108:4 in callFunctionReturnFlushedQueue
at [native code]:null in callFunctionReturnFlushedQueue

I tried importing below code also.

import * as Font from "expo-font";
import { Ionicons } from "@expo/vector-icons";

But not working

My source code:

app.js

import React, { useEffect } from "react";

import App1 from "./src/screens/createCoin.jsx";
import * as Font from "expo-font";
import { Ionicons } from "@expo/vector-icons";

export default function App() {
  return <App1 />;
}

createCoin.jsx:

import React, { Component, useState, useEffect, useRef } from "react";

import {
  Container,
  Header,
  Content,
  H1,
  Text,
  Form,
  Item,
  Input,
  Button,
  Badge,
} from "native-base";

export default function createCoin() {
  const [name, setName] = useState("");
  const [description, setDescription] = useState("");
  const [nameError, setNameError] = useState("");

  const handleSubmit = () => {
    var nameValid = false;
    if (name.length == 0) {
      setNameError("Name is required");
    } else if (name.indexOf(" ") >= 0) {
      setNameError("Name cannot contain spaces");
    } else {
      setNameError("");
      nameValid = true;
    }
    if (nameValid) {
      alert("Name: " + name + "\nDescription: " + description);
    }
  };

  return (
    <Container>
      <Header />
      <Content>
        <Form>
          <Item>
            <Input
              placeholder="coin name"
              onChangeText={(text) => setName(text)}
            />
          </Item>
          {nameError.length > 0 && (
            <Badge danger>
              <Text>{nameError}</Text>
            </Badge>
          )}
          <Item last>
            <Input
              placeholder="coin description"
              onChangeText={(text) => setDescription(text)}
            />
          </Item>
          <Button title="Save" onPress={handleSubmit}>
            <Text>Submit</Text>
          </Button>
        </Form>
      </Content>
    </Container>
  );
}

Downloaded the ttf file from this link. And kept in the folder structure as you mentioned. But still getting below error. FYI, the font file downlaoded with - and then I renamed with _.

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.
at node_modules\react-native\Libraries\LogBox\LogBox.js:148:8 in registerError
at node_modules\react-native\Libraries\LogBox\LogBox.js:59:8 in errorImpl
at node_modules\react-native\Libraries\LogBox\LogBox.js:33:4 in console.error
at node_modules\expo\build\environment\react-native-logs.fx.js:27:4 in error
at node_modules\expo-font\build\Font.js:27:16 in processFontFamily
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:3681:14 in diffProperties
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:3692:40 in diffProperties
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:4015:28 in createInstance
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:14706:39 in completeWork
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:18123:27 in completeUnitOfWork
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:18096:29 in performUnitOfWork
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:18013:38 in workLoopSync
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:17977:18 in renderRootSync
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:17674:33 in performSyncWorkOnRoot
at [native code]:null in performSyncWorkOnRoot
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:5321:31 in runWithPriority$argument_1
at node_modules\scheduler\cjs\scheduler.development.js:653:23 in unstable_runWithPriority
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:5316:21 in flushSyncCallbackQueueImpl
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:5304:28 in flushSyncCallbackQueue
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:17125:30 in scheduleUpdateOnFiber
at node_modules\react-native\Libraries\Renderer\implementations\ReactNativeRenderer-dev.js:11003:16 in dispatchAction
at [native code]:null in dispatchAction
at App.js:23:38 in AppLoading.props.onFinish
at node_modules\expo-app-loading\build\AppLoading.js:17:4 in startLoadingAppResourcesAsync
at node_modules\regenerator-runtime\runtime.js:63:36 in tryCatch
at node_modules\regenerator-runtime\runtime.js:293:29 in invoke
at node_modules\regenerator-runtime\runtime.js:63:36 in tryCatch
at node_modules\regenerator-runtime\runtime.js:154:27 in invoke
at node_modules\regenerator-runtime\runtime.js:166:18 in PromiseImpl.resolve.then$argument_1
at node_modules\react-native\node_modules\promise\setimmediate\core.js:37:13 in tryCallOne
at node_modules\react-native\node_modules\promise\setimmediate\core.js:123:24 in setImmediate$argument_0
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:130:14 in _callTimer
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:181:14 in _callImmediatesPass
at node_modules\react-native\Libraries\Core\Timers\JSTimers.js:441:30 in callImmediates
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:387:6 in __callImmediates
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:135:6 in __guard$argument_0
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:364:10 in __guard
at node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:134:4 in flushedQueue
at [native code]:null in flushedQueue
at [native code]:null in callFunctionReturnFlushedQueue
expo react-native android
1 Answers

Firstly install AppLoading like this

expo install expo-app-loading

Create a folder called hooks where you App.js is located.

Download Roboto Fonts

Inside hooks folder create a file called useFonts.js paste this code

useFonts.js

import * as Font from 'expo-font';

const useFonts = async () => {
  await Font.loadAsync({
    Roboto_medium: require('../assets/fonts/Roboto_medium.ttf'), // Download .tff font file and use it here like this
  });
};

export default useFonts;

Another way of writing useFonts would be by installing

expo install @expo-google-fonts/roboto

and then your useFonts.js would look like this

import * as Font from 'expo-font';
import { Roboto_500Medium, Roboto_900Black_Italic } from '@expo-google-fonts/roboto';

const useFonts = async () => {
  await Font.loadAsync({
    Roboto_medium: Roboto_500Medium,
    Roboto_bold: Roboto_900Black_Italic,
  });
};

export default useFonts;

Then in your App.js paste this code

import React, { useEffect } from "react";

import App1 from "./src/screens/createCoin.jsx";
import * as Font from "expo-font";
import { Ionicons } from "@expo/vector-icons";

export default function App() {
  const [fontsLoaded, setFontsLoaded] = useState(false);

  const LoadFonts = async () => {
    await useFonts();  // Here we will have to await the call
  };

  if (!fontsLoaded) {
    return (
      <AppLoading
        startAsync={LoadFonts}
        onFinish={() => setFontsLoaded(true)}
        onError={(error) => console.log(error)}
      />
    );
  }

  return <App1 />;
}

By following this way of loading fonts, your App.js will be neat and clean. I use this way in all of my projects

Working Example here

user_131706360
Related