ReactNative アップグレード対応 v0.46 -> v0.52

最近、苦行のアップグレード対応をした

RN v0.46からv0.52にアップグレードした時に色々エラーで引っかかったので

なにを修正したかのメモをする

$ react-native-git-upgrade はうまく動かなかったので使ってない

自力で差分をみてマージした

前提として、iOSのプロジェクトにはCocoapodsを導入してる

テンプレートを更新

最初からあったファイル群を更新する

以下のURLでバージョンを指定すると差分が見れる

Comparing rn-0.46.4...rn-0.52.2 · ncuillery/rn-diff · GitHub

package.json

差分を見ながら、最初から入ってたモジュールのバージョンを上げた

書き換えた後 ↓

"react": "16.2.0",
"react-native": "0.52.2",
"babel-jest": "22.1.0",
"babel-preset-react-native": "4.0.0",
"flow-bin": "0.61.0",
"jest": "22.1.4",
"react-test-renderer": "16.2.0"

.flowconfig

差分を見ながら新しく追加された設定と変わった設定を手動マージ

テストが落ちてたら、ほぼ自分が設定したところが悪いので自力で直す

.gitignore

差分をみて手動マージ

その他

build.gradle, MainApplication.java にも変更があったが、ここはいじらなかった

v0.49で、初回のエンドポイントが変わった事による変更なので

v0.49より前から開発してた場合は直さなくても問題は無い

気になるなら直しても良い

残りは必要ないので無視

サードパーティー(npm)の更新

導入した react-native-xxxx 系のモジュールを更新する

RNをアップグレードする際、リリースノートを見るとBreaking changesが幾つかあるので

たいていそれ関連のエラーが出る

サードパーティーのモジュールが対応してくれていれば、大体アップグレードするだけで直る

その過程でハマったエラーを紹介

propTypes関連のエラー

iOS/Android

2018-01-24 19:12:12.104554+0900 togetter_app[43599:6074808] undefined is not an object (evaluating 'b.propTypes.style')

このエラーはコード中にView.propTypes が書かれていると起こる

import { ViewPropTypes } from 'react-native'
// View.propTypes -> ViewPropTypes

書き方が変わったので修正するだけ

依存してるサードパーティーも影響するので、対応してくれてないと困る

未だに対応されてなかったら捨てたほうが良さそうだけど、それが無理ならフォークして直すしかない

App is crashing on launch - only on Release build · Issue #17276 · facebook/react-native · GitHub

react-native-device-info

iOSでの警告

2018-01-26 13:39:28.881 [warn][tid:NSOperationQueue 0x600000425c40 (QOS: UNSPECIFIED)][RCTModuleData.mm:250] RCTBridge required dispatch_sync to load RCTDevLoadingView. This may lead to deadlocks

podを使ってインストールしてると出る警告

回避するにはpodに書くのをやめて、通常通りreact-native link ... の方法にするしかなかった

react-native-device-infoにかぎらず、このエラーが起きた場合はこの方法で大体直る

根本的なエラーの原因はよく分からなかった

RCTBridge required dispatch_sync to load RCTDevLoadingView. This may lead to deadlocks · Issue #16376 · facebook/react-native · GitHub

react-native-vector-icons

error: bundling failed: Error: While resolving modulereact-native-vector-icons/MaterialIcons, the Haste packagereact-native-vector-iconswas found. However the moduleMaterialIconscould not be found within the package. Indeed, none of these files exist: ...(省略)

RN v0.52.1 だと出るエラー

回避策はあったけど、RN v0.52.2 で直ったので問題なくなった

the Haste package 'react-native-vector-icons' · Issue #630 · oblador/react-native-vector-icons · GitHub

requiresMainQueueSetup

iOSでの警告

f:id:rskull:20180201174251p:plain

デバッガーにいくつか警告が出た

おそらくRN v0.48から追加された変更で

ネイティブモジュールのブリッジ部分にrequiresMainQueueSetupを設定する必要ができた

こんな感じで ↓

Fix RN 0.48+ warning about requiresMainQueueSetup by doochik · Pull Request #242 · rebeccahughes/react-native-device-info · GitHub

依存してるサードパーティーが対応してくれていれば、アップグレードでエラーは消えた

しかし、ビルドインのはずのRCTImageLoaderでも同じ警告が出てた…

どうしようもないので修正待ち。デバッガーにしか警告はでなくて動作にも影響してないようなので

とりあえずは問題なさそう

Androidでビルドエラー

error: method does not override or implement a method from a supertype @Override ^ ...(省略)

導入してるネイティブモジュール関連でエラーが出た

これはRN v0.47で入ったAndroidのBreaking changesによるもの

これも対象のnpmのアップグレードで対応した

変更は削除だけっぽい

Remove override of createJSModules by ptomasroos · Pull Request #446 · evollu/react-native-fcm · GitHub

疲弊した

対応したのはこれくらい

色々ハマりすぎて疲れた

アップグレードをサボるほど辛くなるの厳しい