Get Rid from Native Base fontFamily "Roboto_medium" is not a system... Error

Question

I'm using components from Native Base in my expo App but the error of font is irritating again n again. Kindly provide me the solution according to my code to get rid from this. Thanks in Advance

Error

You started loading the font "Roboto_medium", but used it before it finished loading.

You need to wait for Font.loadAsync to complete before using the font.

We recommend loading all fonts before rendering the app, and rendering only Expo.AppLoading while waiting for loading to complete.

node_modules\react-native\Libraries\YellowBox\YellowBox.js:59:8 in error

node_modules\expo\build\environment\muteWarnings.fx.js:27:24 in error

... 24 more stack frames from framework internals

App.js

import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import LoginScreen from './src/screens/LoginScreen';

const AppNavigator = createStackNavigator({
  Login: {
    screen: LoginScreen,
    navigationOptions: {
      header: null
    }
  },

});

export default createAppContainer(AppNavigator);

LoginScreen.js

import React, { Component } from 'react';
import { View, StyleSheet, ImageBackground, Image, KeyboardAvoidingView } from 'react-native';
import { Text, Container, Header, Content, Input, Item, Button, Toast, Root } from 'native-base';
import * as Font from 'expo-font';
import { Ionicons } from '@expo/vector-icons';

export default class LoginScreen extends Component {
    constructor() {
        super()
        this.state = {
            email: '',
            password: '',
            showToast: false
        }
    }
    async componentWillMount() {
        await Font.loadAsync({
          'Roboto': require('../../node_modules/native-base/Fonts/Roboto.ttf'),
          'Roboto_medium': require('../../node_modules/native-base/Fonts/Roboto_medium.ttf'),
          ...Ionicons.font,
        })
      }
    onSubmit(ref) {
        Toast.show({
            text: "Username & Password are mandatory.",
            type: 'warning',
            textStyle: { fontSize: 14, alignSelf: 'center' },
        })
    }
    render() {
        return (
            <Root>
                <ImageBackground
                    source={require('../images/login-bg.jpg')}
                    style={styles.container}
                >
                    <KeyboardAvoidingView behavior="padding" enabled>
                        <View style={styles.loginContaner}>
                            <Image source={require('../images/MMC-logo.png')} style={styles.logo} />
                            <Item regular style={styles.loginInputItem}>
                                <Input
                                    placeholder='Email'
                                    placeholderTextColor="#555"
                                    style={styles.loginInput}
                                    autoCapitalize="none"
                                    autoCorrect={false}
                                    value={this.state.email}
                                    onChangeText={(val) => this.setState({ email: val })}
                                />
                            </Item>
                            <Item regular style={styles.inputPassword}>
                                <Input
                                    autoCapitalize="none"
                                    placeholder='Password'
                                    secureTextEntry
                                    placeholderTextColor="#555"
                                    style={styles.loginInput}
                                    value={this.state.password}
                                    onChangeText={(val) => this.setState({ password: val })}
                                />
                            </Item>
                            <Button block style={styles.button} onPress={() => this.onSubmit(this)}>
                                <Text>LOGIN</Text>
                            </Button>
                        </View>
                    </KeyboardAvoidingView>
                </ImageBackground>
            </Root>
        );
    }
}

Package.json

{
  "main": "node_modules/expo/AppEntry.js",
  "scripts": {
    "start": "expo start",
    "android": "expo start --android",
    "ios": "expo start --ios",
    "web": "expo start --web",
    "eject": "expo eject"
  },
  "dependencies": {
    "expo": "^35.0.0",
    "native-base": "^2.13.8",
    "react": "16.8.3",
    "react-dom": "16.8.3",
    "react-native": "https://github.com/expo/react-native/archive/sdk-35.0.0.tar.gz",
    "react-native-gesture-handler": "~1.3.0",
    "react-native-reanimated": "~1.2.0",
    "react-native-web": "^0.11.7",
    "react-navigation": "^4.0.10",
    "react-navigation-stack": "^1.10.3",
    "expo-font": "~7.0.0"
  },
  "devDependencies": {
    "babel-preset-expo": "^7.1.0"
  },
  "private": true
}

Shashank Dubey Shashank Dubey · Accepted Answer · 2020-02-21T15:10:35

I was facing the same problem and what I do is that import Text from react-native rather than native-base, and this solved my problem.

Give a try removing from import {Text} from 'native-base' and put this into 'react-native'.

Get Rid from Native Base fontFamily "Roboto_medium" is not a system... Error

2 Answers