見出し画像

ReactNativeをv0.63.3にアップグレードしてハマったこと

stand.fm テックブログ

stand.fm でエンジニアをしている太田です。

弊社では、stand.fm という iOS/Android 向けアプリを React Native で開発しています。最近、React Native v0.61.4 → v0.63.3 のアップグレードを行なったのですが、その際ハマった点をいくつか紹介したいと思います。

これからアップグレードする方の参考になれば幸いです。

アップグレードのモチベーション

バージョンが2つ進んだ

できるだけ最新のバージョンを保ちたいですが、フレームワークのバージョンは影響が大きいため、他の開発状況も考慮し、React Native の最新バージョンが2つ進んだらアップグレードするようにしています。

Flipper

v0.62からFlipperがデフォルトで使用できるようになりました。（v0.62以前でも Flipper は使用できますが、インストールにかかる手間がなくなりました。）

自分は React Native Debugger をよく使っていて、Flipper は知らなかったのですが、TECH STAND #1 React Native で @mururururu さんのお話を聞いて使ってみたいなと思いました。

まだあまり深く触れていませんが、これから使い込んでいこうと思います。

iOS 14 対応

iOS 14 で動作確認してみると画像が表示されなくなるという問題がありました。（v0.63.2の 123423c2a9で修正されています。）

・ Image cannot show image in iOS 14 · Issue #29279

この Issue 自体はパッチを当てれば直るので、React Native のアップグレードが必須ということではありません。ただ、他にも iOS 14 や Xcode 12 関連で未知の問題があったときにReact Native のバージョンが最新になっていたほうが安全そうに思えたのでアップグレードを行いました。

ハマったところ

ScrollView

・ Make ScrollView use ForwardRef · facebook/react-native@d2f314a

v0.63.0 で上記のコミットがマージされ、ScrollView が React.forwardRef を使用するようになりました。measure や measureLayout が ref.current から呼べるようになります。

stand.fm で使用しているパッケージの中では react-native-keyboard-aware-scroll-view が、この変更の影響を受けていました。パッケージのアップグレードとパッチを当てることで対応しました。

・ Fix #429 for broken react-native 0.63.0. Detect Forwarding Refs #442
・ react-native 0.63 scrollIntoView of undefined #451

ScrollView を ref で参照しているコードがある場合は確認したほうが良いかもしれません。

Android でテキストの文字が見えなくなる

・ Android <Text> color becomes invisible when switching back to initial state #29717  

Android のみですが、動的にテキスト色を変更し、元に戻した時にテキストの初期値を忘れてしまうようです。
上記 Issue の再現コードを動かしたものが以下です。タップで文字色を緑にした後、初期値の黒に戻って欲しいところで文字が見えなくなっています。

画像1

対応として以下のPRが出ていますが、まだマージされていません（2020/11/23現在）。 React Native に自分でこのパッチを当てる必要がありました。

・ [Fix] `Android/ColorProps`: ColorProps with value null should be defaultColor instead of transparent #29830

Android のソースにパッチを当ててビルドすれば反映されると思っていたんですが、予めソースをビルドし *.jar や *.aar を生成しておく必要があるようです。以下のページで手順が紹介されています。

・ Building from source · facebook/react-native Wiki

Android SDK, Android NDK をインストールする方法と、Dockerで行う方法が紹介されています。今回はDockerを使用し、問題なくビルドができました。Wikiに書いてありませんが、docker run の前に yarn install を行う必要あるのがハマりポイントでした。

現在 stand.fm で使用している React Native は以下で公開しています。

Tips: git worktree

最後にTipsなのですが、今回の React Native のアップグレードは git worktree を使って行いました。このコマンドを使うとリポジトリに作業ディレクトリを新しく作り、その中で別ブランチの作業を行うことができます。

例えば、 main ブランチに a.txt があるとします。

test/
|--a.txt

ここで git worktree add sub を実行すると、以下のように sub ディレクトリが作成され、その中は sub ブランチになっています。

test/     # <- ここは main ブランチ
|--a.txt
|-- sub/  # <- ここは sub ブランチ
|  |--a.txt

他の作業を並列に行う場合、アップグレード作業ブランチから他のブランチに切り替えるたびにパッケージのインストールを行う必要がありますが、ディレクトリを分けてしまえばその必要がなくなり快適に作業できました。

最後に

この記事を書いている間に v0.64.0-rc.1 がリリースされていました。React Native は変化が早くて楽しいです。

・・・

株式会社 stand.fm では、変化を楽しめるエンジニアを募集しています。

募集職種はこちらから 

Twitter で stand.fm の技術情報や note の更新をしています。ぜひフォローしてみてください。

・・・

12月18日(金) 19:00~ TECH STAND #2 React Nativeを開催します。
ぜひご参加お待ちしております。


この記事が気に入ったらサポートをしてみませんか？