title: Get Rid from Native Base fontFamily "Roboto_medium" is not a system... Error
body: <p>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</p>
  
  <p>Error</p>
  
  <blockquote>
    <p>You started loading the font "Roboto_medium", but used it before it
    finished loading.</p>
    
    <ul>
    <li><p>You need to wait for Font.loadAsync to complete before using the font.</p></li>
    <li><p>We recommend loading all fonts before rendering the app, and rendering only Expo.AppLoading while waiting for loading to complete.</p></li>
    <li>node_modules\react-native\Libraries\YellowBox\YellowBox.js:59:8 in error</li>
    <li>node_modules\expo\build\environment\muteWarnings.fx.js:27:24 in error</li>
    <li>... 24 more stack frames from framework internals</li>
    </ul>
  </blockquote>
  
  <p>App.js</p>
  
  <pre><code>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);
  </code></pre>
  
  <p>LoginScreen.js</p>
  
  <pre><code>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 &amp; Password are mandatory.",
              type: 'warning',
              textStyle: { fontSize: 14, alignSelf: 'center' },
          })
      }
      render() {
          return (
              &lt;Root&gt;
                  &lt;ImageBackground
                      source={require('../images/login-bg.jpg')}
                      style={styles.container}
                  &gt;
                      &lt;KeyboardAvoidingView behavior="padding" enabled&gt;
                          &lt;View style={styles.loginContaner}&gt;
                              &lt;Image source={require('../images/MMC-logo.png')} style={styles.logo} /&gt;
                              &lt;Item regular style={styles.loginInputItem}&gt;
                                  &lt;Input
                                      placeholder='Email'
                                      placeholderTextColor="#555"
                                      style={styles.loginInput}
                                      autoCapitalize="none"
                                      autoCorrect={false}
                                      value={this.state.email}
                                      onChangeText={(val) =&gt; this.setState({ email: val })}
                                  /&gt;
                              &lt;/Item&gt;
                              &lt;Item regular style={styles.inputPassword}&gt;
                                  &lt;Input
                                      autoCapitalize="none"
                                      placeholder='Password'
                                      secureTextEntry
                                      placeholderTextColor="#555"
                                      style={styles.loginInput}
                                      value={this.state.password}
                                      onChangeText={(val) =&gt; this.setState({ password: val })}
                                  /&gt;
                              &lt;/Item&gt;
                              &lt;Button block style={styles.button} onPress={() =&gt; this.onSubmit(this)}&gt;
                                  &lt;Text&gt;LOGIN&lt;/Text&gt;
                              &lt;/Button&gt;
                          &lt;/View&gt;
                      &lt;/KeyboardAvoidingView&gt;
                  &lt;/ImageBackground&gt;
              &lt;/Root&gt;
          );
      }
  }
  </code></pre>
  
  <p>Package.json</p>
  
  <pre><code>{
    "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
  }
  </code></pre>