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

Question

When using import Native Base (as it comes) I have encountered trouble because of a Font error shown in screen. If you click dismiss it will disappear but the user can't be seeing that every time a Text gets loaded. ¿Is there a correct way to solve the font problem?

This official documentation says to do this:

// At the top of your file
import { Font } from 'expo';
import { Ionicons } from '@expo/vector-icons';

// Later on in your component
async componentDidMount() {
  await Font.loadAsync({
    'Roboto': require('native-base/Fonts/Roboto.ttf'),
    'Roboto_medium': require('native-base/Fonts/Roboto_medium.ttf'),
    ...Ionicons.font,
  });
}

but it didn't work. This is my code:

import React, { Component } from 'react';
import { View, } from "react-native";
import { Button, Text } from 'native-base';

export default class MyComponent extends Component {

  render() {

        return (
                 <View>
                     <Button>
                       <Text>Click me!</Text>
                     </Button>
                  </View>
                )
   }
}

I expect the code to run smoothly but every time it loads the same error:

console.error: "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."
__expoConsoleLog
    AppEntry.bundle?platform=android&dev=true&minify=false&hot=false:95014:31
...................
...................
...................

Answer 1

Native Base uses Roboto_Medium as a font for Title and some objects. Roboto_Medium is not a system font.

You can do either two things

1. Install and Load Roboto_Medium font in your codebase.
2. Edit existing Native Base core files

1) Install and Load Roboto_Medium font in your codebase
After installing Native Base, run these in terminal expo install expo-font.
After that Open your App.js file, add this two lines,
import * as Font from 'expo-font';
import { Ionicons } from '@expo/vector-icons';
After that include function componentDidMount()

async componentDidMount() {
  await Font.loadAsync({
     Roboto: require('native-base/Fonts/Roboto.ttf'),
     Roboto_medium: require('native-base/Fonts/Roboto_medium.ttf'),
     ...Ionicons.font,
  });
  this.setState({ isReady: true });
}

You must call componentDidMount() function. If you are using Class Component, then this can be called using constuctor method

constructor(){
   componentDidMount();
}

But, if you are using Functional Method, then you have manually call the componentDidMount() function.

2) Edit existing Native Base core files (Alternative)
You have to edit core Native Base files.
Location of File:

1. commonColor.js
   node_modules\native-base\dist\src\theme\variables \ commonColor.js
   
2. material.js
   node_modules\native-base\dist\src\theme\variables \ material.js
   
3. platform.js
   node_modules\native-base\dist\src\theme\variables \ platform.js
   In this files, find "Roboto_Medium" and replace it with "Roboto" or any other system default fonts.

But, as we have hardcoded the node_modules, with each update of Native Base, you have to again hard code the values again.