React Native 0.52開発時iOS Simulatorで'Unrecognized font family ...'の赤い画面エラーが表示されてしまった場合の対処 #reactnative

私の場合は、create-react-native-appで作成したプロジェクトがExpo上では問題なく動作していたのに
react-native ejectをしたのち、react-native run-iosでビルド＆エミュレータ上で動かそうとした時に'Unrecognized font family ...'赤い画面エラーが表示されました。
解決のためにチェックすべきポイントをまとめました。

https://medium.com/react-native-training/adding-custom-fonts-to-react-native-b266b41bff7f
https://github.com/oblador/react-native-vector-icons#red-screen-with-unrecognized-font-family-error-on-ios
の２記事が参考になりました。以下そのまとめです。

チェックポイント①:iOSプロジェクトにフォントファイルが関連付けされているか確認する

react-native-vector-iconsなどのアイコンパッケージではない、自前の.ttfファイルのフォントが読み込まれずエラーが出ている場合、package.jsonに以下設定が書かれていることを確認する。

（./assets/fonts/MyFont.ttfにカスタムフォントファイルがある場合の例)

package.json

"rnpm": {
  "assets": [
    "./assets/fonts/"
  ]
}

次に ./ios/PROJECT_NAME.xcodeproj をXcodeで開き、以下３項目を確認する

.ttfファイルがResoucesフォルダに入っているかこと
Info.plistファイルに.ttfファイル名が書かれていること
Build Phases→Copy Gubdle Resourcesに.ttfファイル名が含まれていること

もし無ければ、react-native link(または手動)でプロジェクト内にフォントファイルを取り込み、最後にreact-native run-iosで再コンパイル。

チェックポイント②:フォント名を間違って指定していないか確認する

AppDelegate.mに以下コードを追記しFontDumpする。

AppDelegate.m

for (NSString* family in [UIFont familyNames])
{
  NSLog(@"%@", family);
  for (NSString* name in [UIFont fontNamesForFamilyName: family])
  {
    NSLog(@" %@", name);
  }
}

react-native run-iosで実行すると、赤い画面エラーが出つつもフォント名一覧が画像右下のようにデバッグ出力されるので、そこに指定のフォントが存在することと、名前が間違っていないことを確認する。

補足の日記

私の場合はiOSアプリ開発経験がなくXcodeやビルド周りに疎く、この問題の解決に6時間ぐらいかかってしまいました。
以下有用性の低いメモですが、自分の反省のために試行錯誤していたことを箇条書きします。

・create-react-native-appコマンドによるExpo環境で開発を進めていたが、react-native-firebaseとreact-native-fbsdkをインストールするために、
npm install react-native-firebase --save 及び npm install react-native-fbsdk --saveをした。次にreact-native link 及び react-native eject でExpoを捨てる必要があったので行った。非Expo環境に来たら早速エラーが出た、というのが本ケースの経緯。（後で気づいたがExpo+Firebase+FB認証は可能のようなので今回はまだ別にExpo捨てる必要はなかったよう → https://qiita.com/mizchi/items/d21b792e1b9ca5a00546）
・最初に出た赤い画面エラーは確か、本記事メインの'Unrecognized font family..'エラーではなく、 https://github.com/oblador/react-native-vector-icons/issues/626 の While resolving module 'react-native-vector-icons/MaterialIcons', the Haste package 'react-native-vector-icons' was found. エラーだった。フォーラムに書かれている通り
rm ./node_modules/react-native/local-cli/core/__fixtures__/files/package.json でこの問題は解決した。

・記憶が定かでは無いが次は確か、react-native run-ionで再ビルド時した時に、「ビルド失敗 Failed」みたいなエラーが出た。https://code.i-harness.com/ja/q/29b39e4 のようなエラーだった。
・ビルド時エラーが出た際は ./ios/と./android/ を削除してから再度 react-native eject → react-native run-ios で再ビルドすると良い、という書き込みを見たのでその通りにしてみるも効果なし。

・ここまで試行錯誤をしすぎてカオスになったので、npm install react-native-firebaseやreact-native eject前の状態を一度作り直し、上記の解決方法が本当に有効であることを再度確認し、問題や状況を整理しようと考える。
・git clone MyProject で別の場所に新ディレクトリを作成。これでreact-native installやreact-native ejectをする前のExpo環境を再現したつもりだったが、これがなぜかできていなかった。
・新ディレクトリでreact-native-firebaseとreact-native-firebaseをnpm installした
・次にreact-native ejectをするが問題発生。元のディレクトリで行った初のreact-native eject時は http://itexplorer.hateblo.jp/entry/20170904-create-react-native-app-eject のように対話シェルが出たにも関わらず今回は出ず、/ios/と/android/ディレクトリが生成されただけだった。つまりExpoから抜ける時の１回目のejectの挙動を期待していたにも関わらず２回目以降のejectと同じ挙動を見せられた。git cloneでバックアップを使ったとしても、Expoに包まれているeject前の状況を再現出来なかった。
・その後eject前の状況を作り直そうと試したり調べてみるもわからず、結局このgit cloneで作った新ディレクトリは何も役に立たなかったので捨てた。git cloneして作り直してもreact-native ejectがなぜ期待した通りに動かないのかについては不明。"react-native ejectは本当に1度しか実行できないガチで不可逆なもの"であるのか、私が何か無知or勘違いしているのだろう。

・ふたたび元のディレクトリに戻ってくるも、「ビルド失敗 Failed」エラーが未だに出ている。一旦react-native-firebaseとreact-native-fbsdkをアンインストールすることで、ビルドには成功するようにした。最初からそうしろよ、複数の問題を一度に解決しようとするな、と自分で自分に思った。
・ビルドに成功して、ようやく'Unrecognized font family ...'エラーにたどり着いた。これを解決して全てのエラーがなくなった。