【Expo + React Native】Splash画面起動後、iOSアプリがクラッシュする事象を解決した

Expo + React Native で iOSアプリを開発中に直面した問題を解決したため、その方法を記録しておきます。

事象

• npx expo startやeas updateにて発行されたQRコード経由でExpo Go にてアプリ起動させると正常に動く（Splash画面起動 → アプリのトップページ起動）
• eas build -p iosでiOS用ビルド＆App Store Connect へ ipaファイルアップロードし、iPhone実機で Testflight からダウンロードしたアプリ起動させるとSplash画面起動後、アプリがクラッシュする

結論

使用していたページ遷移用ライブラリの必須ライブラリである react-native-gesture-handler のインストール＆設定が足りていなかった。

アプリクラッシュに関する情報検索やコンポーネントの書き方変更など色々試しましたが、結果的にかなり初歩的なミスでした…。

ページ遷移のために導入したライブラリは、以下の2つ。

• @react-navigation/native (公式ドキュメント)
• @react-navigation/stack (公式ドキュメント)

それぞれの公式ドキュメントを確認すると、正しいインストール方法が明記されていました。

react-navigation/native

# 1. ライブラリ本体インストール
npm install @react-navigation/native

# 2. 必須ライブラリインストール
# Expoプロジェクトの人はこっち
npx expo install react-native-screens react-native-safe-area-context
# 素のReact Nativeプロジェクトの人はこっち
npm install react-native-screens react-native-safe-area-context

react-navigation/stack

# 1. ライブラリ本体インストール
npm install @react-navigation/stack

# 2. 必須ライブラリインストール
# Expoプロジェクトの人はこっち
npx expo install react-native-gesture-handler
# 素のReact Nativeプロジェクトの人はこっち
npm install react-native-gesture-handler

# 3. エントリーファイル（index.jsやApp.js等）の一行目（上に何も文がないことを確認）に以下を追記
import 'react-native-gesture-handler';

特にreact-navigation/stackの手順3に関しては、以下のような警告も記載されてました。

警告
AndroidまたはiOS向けにビルドしている場合、このステップをスキップしないでください。開発時には問題なく動作していても、本番でアプリがクラッシュする可能性があります。他のプラットフォームには適用できません。

手順通りに足りない必須ライブラリをインストール＆設定を行い、実機で無事にアプリ起動

おわりに

解決にかなり時間をかけてしまいましたが、アプリが実機で無事に動くようになってよかったです。
ライブラリ導入時や困った時は、改めてドキュメントを読む！という学びになりました。