react-native 0.60系にアップグレードする

0.5X系から 0.60系にアップグレードするのはなかなか大変な作業である。 大きな変更点としては

• autolinking
• Android X
• cocoapodsがデフォルト

ちなみにこの記事書いてる時点で早くも0.61のRCが来ている。早い。

作業手順忘れそうなのでメモ。

Upgrade Helper

基本的にはこれに沿ってアップグレードすればよい。

react-native-community.github.io

が、それだけだとビルドできる状態まで持っていけない。

ネイティブ依存している各種ライブラリを最新版に上げる

0.60対応してないものもあるが、メジャーなものは対応済な印象。

iOS

upgrade-helperで見た際、project.pbxprojファイルの差分を読み取るのは無理ゲーなので、以下手順をXcode上でやる。

Target選択 => Build Phases => Link Binary With Libraries

• libPods-[ProjectName].a 以外を削除
• sentry使ってる場合はlibz.tbd も一応残しておく

参考: [0.60.0] Build failed after upgrading from 0.59.9 to 0.60 · Issue #25572 · facebook/react-native · GitHub

Project Navigator でLibrariesの中身削除

Project Navigator (Xcode左のファイル一覧) で Librariesからすべて選択し、削除(Move to trash)

参考:

React Native 0.60.0 `xcodeproj` upgrade · Issue #47 · react-native-community/upgrade-helper · GitHub

その他トラブルシューティング

ライブラリがSwift使ってる場合はBridgingHeaderが必要。 Xcodeで Project Navigatorで右クリック => Add New Fileし、 Swiftファイルを作成すると、「ブリッジングヘッダー作る？」 みたいなこと聞かれるのでYESに。 BridgingHeaderファイルが勝手に作られる。 ダミーのSwiftファイルは消してもいいかも。

Android

jetifierにやってもらう

yarn add jetifier
yarn jetifier

packages.jsonでpostinstallとかに定義しとくといいかも

"postinstall": "yarn jetifier"

MainApplication.javaで自身で明示的に追加するものとしないもの

autolinkingのおかげでAndroidに使用パッケージを記述する必要がなくなった。
しかし依然として自分で追加しないといけないものもある。

 protected List<ReactPackage> getPackages() {
            @SuppressWarnings("UnnecessaryLocalVariable")
            List<ReactPackage> packages = new PackageList(this).getPackages();

            packages.add(new RNFirebaseAnalyticsPackage());
            packages.add(new RNFirebaseCrashlyticsPackage());
            packages.add(new RNFirebasePerformancePackage());

            return packages;
        }

自分で追加しないといけないパッケージかどうかはどうやって判別すればいいかというと、以下のファイルに列挙されていなければ自分で追加するということになる。

android/app/build/generated/rncli/src/main/java/com/facebook/react/PackageList.java

autolinkingの機能により自動で作成される追加パッケージ定義ファイル。

その他注意

react-native-firebaseは5.X系だとメインのコアライブラリはauto linking対応しているが例えばanalyticsとかperformanceライブラリはautolinking対応してないっぽい？

ここだけmanual追加で対応。