Native Baseのフォント読み込みでエラーが出たときの対応

環境

  • Expo
  • React Native
  • JavaScript
  • Android Simulator

Android Simulatorで動作確認中に、出たエラーは以下の内容です。

NativeBaseで使用しているRoboto_mediumのフォントを読み込んでからではないとエラーがでるようです。

なのでExpoにあるFontライブラリをインストールして対応しました。

画面の初期表示時に読み込む必要があるのでuseEffectを使用して読み込む形にしました。以下が該当ソースコードです。

useEffect(() => {
    Font.loadAsync({
      Roboto_medium: require('../../node_modules/native-base/Fonts/Roboto_medium.ttf'),
    });
  }, []);

ファイルパスの設定はフォルダの階層に合わせて設定する必要があります。

参考資料

https://stackoverflow.com/questions/56923980/problem-with-hook-for-react-native-async-function