【メモ】react-native にて FontAwesome を急に読み込めなくなった問題

react-native にて FontAwesome を急に読み込めなくなった問題

業務で react-native を扱うことになり、 udemy で講座を購入し、勉強していたのですが急にFontAwesomeが読み込めなくなりました。
とりあえず解決できたので、メモがてら記録に残しておきます。

環境

• MacOS: Catalina 10.15.3
• react: 16.9.0
• expo-font: 8.1.1
• expo: 37.0.0

エラーメッセージ

console.error: "fontFamily "FontAwesome" is not a system font and has not been loaded through 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 Font.loadAsync."

カスタムフォントを使うなら、Font.loadAsyncを用いてそのフォントを読み込んでね！ってことでしょうか。

ソースコード

button.js

import React from 'react';
import { StyleSheet, View, TouchableHighlight } from 'react-native';
import * as Font from 'expo-font';
import { createIconSet } from '@expo/vector-icons';
import fontAwsome from '../../assets/fonts/fa-solid-900.ttf';

const CustomIcon = createIconSet({
  pencil: '\uf303',
  plus: '\uf067',
  check: '\uf00c',
}, 'FontAwesome');

class CircleButton extends React.Component {
  state = {
    fontLoaded: false,
  };

  async componentDidMount() {
    await Font.loadAsync({
      FontAwesome: fontAwsome,
    });
    this.setState({ fontLoaded: true });
  }

//以下中略
    );
  }
}

こんな感じで読み込んでいたのですが、うまいこと読み込んでくれませんでした。

解決

expo をアップデートすることで解決しました。

npm i -g expo-cli
expo upgrade

参考

forums.expo.io SDK 37: Unrecognized font family