React Native のバージョンアップ方法 #reactnative

既存 React Native プロジェクトの react-native パッケージのバージョンをあげる方法をまとめておく。

できれば 2 週間にいっぺん、時間があるときにやるとよい。バージョンが開くと変更点が多くなってしまうので追っかけていきたい。ただし JavaScript コードの書き換えが必要なバージョンアップは最近めったにない。

最新バージョンにあげたい場合

これは package.json に書かれた react-native バージョンのテンプレートファイルを現プロジェクトにコピーするコマンド。書き換えていいかのプロンプトが出るが、勝手に merge してくれたりといったことはなく既存設定はまったく考慮されない。

これを実行したあとで .babelrc や .flowconfig などの設定ファイルから Xcode のプロジェクトファイル、 gradle の設定ファイル群までが対象なのでその後でプロジェクトセットアップをいちからやり直す必要がある。

盲点なのが com ではじまらない Java パッケージ名を使っているときに com ではじまるテンプレートがコピーされてしまうこと。これは聞かれないのでいつの間にかいてビルドが失敗してあせる。要注意。

react-native upgrade がやっていることを手でやっていく。

cd /tmp
react-native init a

/tmp/a 以下の各種ファイルと現ファイルの diff をみながら変更部分を更新していく。慣れるとそんなでもない。

別ディレクトリーに react-native init したあと既存プロジェクトから JavaScript コードをコピー、各種設定を再度する。

オススメしない。

package.json の react-native バージョンをお好みのものに書き換えて yarn もしくは npm install 。このあと最新バージョンの手動版と同様、各種設定ファイルの書き換えなどを手でやっていく。

.flowconfig の更新時は新バージョンにあわせるのだが、いくつか注意点があるのであげておく。

まず最後の行 [version] セクションに指定されているバージョンをきっちり確認すること。変更したら package.json 内の flow バージョンを指定したものにあわせてインストールしておく

各種 suppress_comment を react-native で定義されているものにあわせること。正規表現パターンがバージョンごとに微妙に異なっているためか、ここが抜けると react-native 本体のソースに対して flow が怒ることがある。

既存コードの変更は flow のバージョンアップによって通らなくなった部分の修正のみだが、 node_modules の下も気を使う必要がある。独自で定義している private package など使っている場合はそちらも要チェック。