title: React Native Expo Not Loading Fonts
body: <p>React Native newb here!</p>
  
  <p>I am trying to use a custom font in my react native app using expo. I tried following the instructions at <a href="https://docs.expo.io/versions/latest/guides/using-custom-fonts.html#using-custom-fonts" rel="nofollow noreferrer">https://docs.expo.io/versions/latest/guides/using-custom-fonts.html#using-custom-fonts</a> with no luck.</p>
  
  <p>Here is my App.js:</p>
  
  <pre><code>import React from 'react';
  import { View, Text, TouchableOpacity, TextInput, StyleSheet, AsyncStorage, Alert, Platform, NativeModules } from 'react-native';
  import { Expo } from 'expo';
  
  import { StackNavigator } from 'react-navigation';
  import LoginScreen from './src/views/LoginScreen';
  import AuthenticatedScreen from './src/views/AuthenticatedScreen';
  
  import './ReactotronConfig'
  
  import styles from './src/styles/ParentStyles'
  
  const { StatusBarManager } = NativeModules;
  
  const RootStack = StackNavigator(
      {
          Login: { screen: LoginScreen },
          Authenticated: { screen: AuthenticatedScreen }
      },
      { initialRouteName: 'Login'}
  );
  
  const STATUSBAR_HEIGHT = Platform.OS === 'ios' ? 20 : StatusBarManager.HEIGHT;
  
  export default class App extends React.Component {
      state = {
          fontLoaded: false,
      };
  
      async componentDidMount() {
          await Expo.Font.loadAsync({
              'open-sans-bold': require('./src/assets/fonts/OpenSans-Bold.ttf'),
          });
          console.log('running')
          this.setState({ fontLoaded: true });
      }
  
    render() {
      console.log('statusBarHeight: ' + StatusBarManager.HEIGHT);
      return (&lt;RootStack /&gt;);
    }
  }
  
  console.disableYellowBox = true;
  </code></pre>
  
  <p>I am trying to call <code>open-sans-bold</code> in my login page like so:</p>
  
  <pre><code>render() {
      return (
          &lt;View style = { parentStyles.container } &gt;
              &lt;View style={ loginStyles.backgroundImageContainer }&gt;
                  &lt;Image style={ loginStyles.backgroundImage } source={require('../assets/img/splash.png')} /&gt;
              &lt;/View&gt;
              &lt;View style={ loginStyles.logoImageContainer } &gt;
                  &lt;Image style={ loginStyles.logoImage } source={require('../assets/img/PMlogo.png')} resizeMode="contain"/&gt;
              &lt;/View&gt;
              &lt;View style={{flex: 50 }} &gt;
                  //***CALLING FONT HERE*** 
                  &lt;Text style={{ fontFamily: 'open-sans-bold', fontSize: 56 }}&gt;Email&lt;/Text&gt;
                  &lt;TextInput style = {loginStyles.input}
                      underlineColorAndroid = "transparent"
                      placeholder = "Email"
                      placeholderTextColor = "red"
                      autoCapitalize = "none"
                      ref = { input =&gt; { this.textInputEmail = input }}
                      onChangeText = { this.handleEmail }/&gt;
  
                  &lt;TextInput style = { loginStyles.input }
                      underlineColorAndroid = "transparent"
                      placeholder = "Password"
                      placeholderTextColor = "red"
                      autoCapitalize = "none"
                      ref = { input =&gt; { this.textInputPassword = input }}
                      onChangeText = { this.handlePassword }/&gt;
  
                  &lt;TouchableOpacity
                      style = {loginStyles.submitButton}
                      onPress = { () =&gt; this.login(this.state.email, this.state.password) }
                      &gt;
                      &lt;Text style = { loginStyles.submitButtonText }&gt; Login &lt;/Text&gt;
                  &lt;/TouchableOpacity&gt;
              &lt;/View&gt;
          &lt;/View&gt;
      )
  
  }
  </code></pre>
  
  <p>Unfortunately, when I run this I get the following error:</p>
  
  <pre><code>fontFamily 'open-sans-bold' is not a system font and has not been loaded through Expo.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 Expo.Font.loadAsync.
  </code></pre>
  
  <p>Any help is super appreciated!!</p>