ReactNative初心者が躓いた出来事8選

こちらは、Mavs Advent Calendar 2023の15日目の記事です！

最近豆パンにハマっています、カリーです。

今回はReactNative初心者の僕が、ReactNativeで躓いたエラーや事象と、それらの解決した方法について紹介したいと思います。
1歩進んで2歩下がるレベルで数々のエラーに遭遇しましたが、その中でも個人的に印象に残った（？）8つの出来事についての内容となります。

同じようにReactNative初心者の方、エラーが出たけど解決方法がわからない！という方の参考になれば幸いです。

動作環境

M1 Mac（macOS Ventura）
React Native：0.66.5
Node：16.4.0
Xcode：14.3.1
Android Studio：Dolphin 2021.3.1

ReactNativeバージョンアップによる依存関係の不整合

ReactNativeのバージョンを上げることで、それまで動いていたライブラリとReactNativeとで依存関係の不整合が起こりエラーが発生しうると思います。
僕の場合、ReactNativeバージョンを0.60.0から0.66.5に上げたことで諸々の依存関係で不整合が起きてしまいました。

その際は、他ライブラリもReactNativeと同様にバージョンを上げるor調整する必要があります。

「npm-check-updates」を使用することで各ライブラリを最新バージョンに上げることができますが、ReactNativeや各ライブラリの最新バージョンとで依存関係の整合性が合わない場合、手動でバージョンを調整しなくてはなりません。

僕はhttps://unpkg.com/で各ライブラリのバージョンの依存関係を一つ一つ確認し、バージョン調整を行いました。

Container is falsyエラー

npm installを行うと、react-native内のLayoutAnimationでContainer is falsyのエラーが発生しました。
調べてみるとnode_modules配下の該当ライブラリにてオプショナルチェーンが使用されていることが問題のようで、何故か該当箇所でオプショナルチェーンが有効でなくなっているみたいでした。

該当箇所のオプショナルチェーンを削除することで解消しますが、再度npm installを行うと修正した内容が上書きされてしまいます。
patch-packageを使用することで、パッケージにパッチを当てて修正を行うことができます。指定ライブラリ内のオプショナルチェーンを削除するパッチを当てることで、今回の事象は解決しました。

Couldn’t load project at:~（Xcode）

Xcodeでのビルド後に、「Couldn’t load project at: /Users/***/***/node_modules/react-native/Libraries/***」というエラーが大量に出てきました。アプリの動作は問題無く、コンソールにエラーが表示されるのみです。

エラーの出ているライブラリにもよるかもしれないですが、僕の場合は一度Xcodeからプロジェクトを削除し、pod installをしなおした上で再度Xcodeで同プロジェクト開いてビルドすることで、こちらのエラーが表示されなくなりました。

duplicate symbol ‘folly::makeConversionError(folly::ConversionCode, folly::Range<char const*>)’（Xcode）

Xcodeにて、Debugモードでのビルド中に「duplicate symbol ‘folly::makeConversionError(folly::ConversionCode, folly::Range<char const*>)’」エラーが発生しました。（事象発生時にキャプチャを撮り忘れてしまいました…）

この事象が発生した時はiOS でのFlipperのバグ？が原因のようで、 Xcodeのbuild settings > Linking > Dead Code Stripping、もしくはproject.pbxprojファイルのDead_Code_Strippingを確認して、設定値がNOの場合、YESに設定することで解決しました。

buildSettings = {
				// 省略
				CURRENT_PROJECT_VERSION = 1;
				DEAD_CODE_STRIPPING = YES;　// NOの場合YESに変更する
				DEVELOPMENT_TEAM = 5U2D69F2X4;

Gradle could not start your build.（Android Studio）

AndroidStudioにてプロジェクトをビルド時に、Gradle could not start your build.エラーが発生しました。

このエラーは、前回のビルドのプロセスがキャッシュファイルのロックを取っているせいでビルドができない問題となり、前回のビルドのプロセスを切ることで解決できました。

# .gradleファイルのあるディレクトリ配下で、gradleのプロセス（Deamon）を確認
./gradlew --status
   PID STATUS   INFO
 37957 IDLE     7.6

# キャプチャに表示されているOwner PIDのプロセスがある場合、killする
kill -9 37957

react-native-gesture-handler:compileDebugKotlin FAILEDエラー（Android Studio）

AndroidStudioでプロジェクトをビルドした時、「react-native-gesture-handler:compileDebugKotlin FAILED」のエラーが発生しビルドが失敗しました。（事象発生時にキャプチャを撮り忘れてしまいました…）
build.gradleファイルを以下のように修正することで解決しました。

// android/build.gradle
buildscript {
  ext {
    buildToolsVersion = "31.0.0" //29.0.2からバージョンアップ
		minSdkVersion = 24 //21からバージョンアップ
    compileSdkVersion = 33 //31からバージョンアップ
    targetSdkVersion = 33 //31からバージョンアップ
  }
}

buildToolsVersion、compileSdkVersion、targetSdkVersionはその時期の最新版にすることが推奨されているようです。
targetSdkVersionに関しては、バージョンを上げるとAndroidでの挙動も変わるので注意が必要です。
（例として、バージョン33以降ではプッシュ通知の承認を申請する必要がある、など）

“RNSScreen” was not found in the UIManagerエラー（Android Studio）

プロジェクトをビルドしてアプリを立ち上げると、”RNSScreen” was not found in the UIManagerレンダリングエラーが発生しました。

調べてみても事象が発生する具体的な原因が見当たらなかったのですが、以下依存関係を入れると良いという書き込みを見つけ、それに従い依存関係を追加することで解決しました。

npm install @react-navigation/native
npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

cvc-complex-type.2.4.a: 要素’base-extension’で始まる無効なコンテンツが見つかりました。'{layoutlib}’のいずれかが必要です。（Android Studio）

AndroidStudioでプロジェクトをビルド時に、「cvc-complex-type.2.4.a: 要素’base-extension’で始まる無効なコンテンツが見つかりました。'{layoutlib}’のいずれかが必要です。」エラーが発生しました。（事象発生時にキャプチャを撮り忘れてしまいました…）

build:gradleのバージョンが古かったのが原因だったようで、以下ファイルの各gradleバージョンを上げることで解決しました。

# 4.0.0から7.3.0にバージョンアップ
classpath 'com.android.tools.build:gradle:7.3.0'

distributionBase=GRADLE_USER_HOME
# 5.4.0から7.6にバージョンアップ
distributionUrl=https\://services.gradle.org/distributions/gradle-7.6-bin.zip
distributionPath=wrapper/dists
zipStorePath=wrapper/dists
zipStoreBase=GRADLE_USER_HOME