個人アプリを React Native 0.69 にアップデートしたが、今回もすんなり行かなかった

こんにちは、エモトです。家に巣をかけていたツバメの雛が順調で成長して、間も無く巣立ちしそうです。仕事の合間に、気分転換に見ていたので、寂しくもあります。外敵に襲われずに、無事に巣立ってほしい。

さて、React Native で開発してる個人アプリを React Native 0.69 にアップデートしました。何かとアップデート時に困らされる React Native、さらに今回の 0.69 は React Native で初めて React 18 に対応するバージョンです。何も起こらないはずはない！ある意味楽しみ ( ꒪⌓꒪)

（参考）過去にアップデートで困らされたときの記事

• React Native 0.67.x にアップデートしようと思ったら、Expo 44.x の対応でいろいろあった件

起きた問題

私のアプリは、SQLite で保存したデータを条件によって一覧で表示する、または地図上に表示するという簡単なアプリです。

さっそく React Native Upgrade Helper に従って更新してビルドすると、いくつか導入しているライブラリで問題が起こりました。

react-native-vector-icons

• クラッシュする
• 使用箇所で以下のようなエラーメッセージ

Unrecognized font family 'Ionicons'

react-native-sqlite-storage

• クラッシュする
• 関数 openDatabase を呼ぶと例外発生

[TypeError: null is not an object (evaluating 'NativeModules["SQLite"][method]')]

react-native-maps

• クラッシュする

ViewPropTypes will be removed from React Native. Migrate to ViewPropTypes exported from 'deprecated-react-native-prop-types'. #33557

あわわ

原因とその修正方法

今回の変更は React 18 に注目してましたが、他にも変更点（a, b） があります。今回起きた問題はそれが原因でした。

• react native cli が変更された
• deprecated になっていた型 react-native-prop-types が取り除かれた

react native cli が変更になったことにとり、Native Modules の Autolinking の機能が強化されて一方、以前の設定のままでは失敗するようになりました。

• refactor(breaking): remove deprecated `link`, `unlink` and associated code by grabbou · Pull Request #1537 · react-native-community/cli
• cli/autolinking.md at master · react-native-community/cli

ざっくり言うと、autolinking に関しては react-native.config で不要になった項目を取り除けば大丈夫です（今回、私が遭遇した内容では）。

型エラーに関しては、適切な型に関する修正することになります。また、React Native 0.65 から deprecated になっていた removeListener が削除されたので、ワーニングのまま未対応にしていた場合、面倒になことになります。お気をつけて。

対応

自分のコードならともかく、ライブラリ側で改修が必要になると、大変だな・・・。

react-native-vector-icons

対応した 9.2.0 が直様リリースされたので、アップデートしたら終了です。react-native.config で assets を設定して箇所が削除されています。

react-native-sqlite-storage

対応したバージョンがリリースされていないので、パッチファイル react-native-sqlite-storage+6.0.1.patch を自分で作成して patch-package で対応しました。なお、これらの issue と PR を出しておきました。本家で対応してもらえば嬉しい。

react-native-maps

対応した 0.30.2 が既にリリースしてあったので、アップデートして完了です！簡単。

まとめ

本当は useEffect などの動作変更で何か意図しない動作をする問題を楽しみにしていたのですが、ライブラリの導入方法に関するエラーでした。今週末は、コードに間違いないけど期待動作が違うという、終わらないデバッグを期待してました。

まあ、私が作ったアプリの規模が小さいので、問題が観測できていないだけかもしれません。引き続き、細かい動作検証や React Native 0.69 関連の issue を見ていこうと思います。