reactnative
nativebase

NativeBaseでのRoboto_mediumフォントの読み込みに関するErrorについて

問題

https://facebook.github.io/react-native/docs/getting-started.html
https://docs.nativebase.io/docs/GetStarted.html
の手順でReact NativeとNative BaseをインストールしてExpoで動作確認しようとすると、
fontFamily 'Roboto_medium' is not a system font and has not been loaded through Exponent.Font.loadAsync.
というErrorが出たため、

https://docs.nativebase.io/docs/GetStarted.html
を参考に以下のコードをApp.jsに追加したものの解決せず、
You started loading 'Roboto_medium', but used it before it finished loading
という別のErrorが出てしまいました.

App.js
async componentWillMount() {
  await Expo.Font.loadAsync({
    'Roboto': require('native-base/Fonts/Roboto.ttf'),
    'Roboto_medium': require('native-base/Fonts/Roboto_medium.ttf'),
  });
}

解決策

最終的には、
https://github.com/GeekyAnts/NativeBase/issues/1041
https://github.com/GeekyAnts/NativeBase-KitchenSink/blob/master/src/boot/setup.js
https://docs.expo.io/versions/latest/guides/using-custom-fonts.html
の3つを参考に、App.jsを以下のように変更すると上手くいきました.

App.js
import React, { Component } from 'react';
import { View } from 'react-native';
import { Container } from 'native-base';

export default class App extends Component {
  constructor() {
    super();
    this.state = {
      isReady: false
    };
  }
  componentWillMount() {
    this.loadFonts();
  }
  async loadFonts() {
    await Expo.Font.loadAsync({
      Roboto: require("./node_modules/native-base/Fonts/Roboto.ttf"),
      Roboto_medium: require("./node_modules/native-base/Fonts/Roboto_medium.ttf"),
    });
    this.setState({ isReady: true });
  }

  render() {
    if (!this.state.isReady) {
      return <Expo.AppLoading />;
    }

    return (
      <Container>
        {/* fontのloadが終了した際にレンダリングしたいものをここに書く */}
      </Container>
    );
  }
}