fontFamily 'Roboto_medium' is not a system font and has not been loaded through Exponent.Font.loadAsync

[brownieboy]

Loading the app in the Expo client in Android triggers red screen with error

fontFamily 'Roboto_medium' is not a system font and has not been loaded through Exponent.Font.loadAsync.

If's simple test app, just displaying an Native-base card. Works fine on iOS. Even in Android, I can see it display the NativeBase card briefly before it red screens. I am loading the font as per the instructions in the readme:

import { Font } from "expo";

class NHCardShowcase extends Component {
  async componentDidMount() {
    await Font.loadAsync({
      Roboto: require("native-base/Fonts/Roboto.ttf"),
      Roboto_medium: require("native-base/Fonts/Roboto_medium.ttf")
    });
  }

Update
After posting this, I noticed that the readme uses componentWillMount rather than componentDidMount. When I changed my code accordingly though, I get the error

You started loading 'Roboto_medium', but used it before it finished loading

[brownieboy]

Googling for that "used it before it finished loading" error came with this SO post, which gave me the workaround:
https://stackoverflow.com/questions/47308557/loading-font-native-base-error

Basically, I had to delay rendering of my top-level component until the font has been loaded, like so:

import React, { Component } from "react";
import { Root } from "native-base";
import { Font, AppLoading } from "expo";

class HomeNav extends Component {
  constructor(props) {
    super(props);
    this.state = { loading: true };
  }

  async componentWillMount() {
    await Font.loadAsync({
      Roboto: require("native-base/Fonts/Roboto.ttf"),
      Roboto_medium: require("native-base/Fonts/Roboto_medium.ttf")
    });
    this.setState({ loading: false });
  }

  render() {
    if (this.state.loading) {
      return (
        <Root>
          <AppLoading />
        </Root>
      );
    }
    return (
      <Root>
        <AppNavigator />
      </Root>
    );
  }
}

I'm not happy that you have to put in Expo-level hacks like this, but it is, at least, only on one component.

[DifferentialPupil]

For anyone still having issues, the following worked for me:

export default class App extends React.Component {
  state = {
    fontLoaded: false,
  }
  async componentWillMount() {
    await Expo.Font.loadAsync({
      'pixel-font': require('./assets/fonts/PixelFJVerdana12pt.ttf'),
    });
    this.setState({ fontLoaded: true });
  }
  render() {
    return (
      <View style={styles.container}>
        {
          this.state.fontLoaded ? (
            <Text style={{ fontFamily: 'pixel-font', fontSize: 56 }}>
              Hello, world!
            </Text>
          ) : null
        }
      </View>
    )
  }
}

[arrygoo]

Hmm I'm having this issue, not finding a solution yet :(

[akhil-ga]

@arrygoo can you try brownieboy's solution

[ezos86]

Same issue - Started loading and used before finished loading - But copied code exactly as above. Looks like still issue.

[arrygoo]

For me it turned out to be a completely unrelated issue. In fact, a lot of time when my expo app throws an error, it shows the error above. Once I fix the issue, the error about exponent loading the font goes away too.

I wonder if this means that the error is always there but masked by something else? Or if expo is throwing this error incorrectly when it's supposed to show the actual place of error/crash.

[kevin-williams]

After cobbling together bits and pieces on loading the icons for react-native-elements I finally figured this out. Check out my blog for a write-up.
https://javascriptrambling.blogspot.com/2018/03/expo-icon-fonts-with-react-native-and.html