React NativeでAndroidのパフォーマンスが悪すぎて、四苦八苦した話

はじめに

今年、仕事の案件で初めてReact Nativeでアプリ開発していたときの話。
開発中は比較的新しめのPixcel4または4,5年前のクソ端末という両極端な実機で動作確認をしていて、いざ受入で2,3年前ぐらいの準主力端末みたいなところで、顧客がテストしだしたら、クソ重いからどうにかしろと言われたときに、苦労した内容を少しまとめてみます

ちなみにアプリ名とかは出せないので、ざっくりどんなアプリかを説明させていただくと、とある情報の検索アプリです。リスト表示、詳細表示ができて、お気に入り保存なんかの機能があったりする感じです。

環境

• react-native 0.61.4

クソ重いというのがどういう状態だったか

• 起動に数秒かかる
• 画面遷移がいちいち遅い
• 画面描画が遅い
• ボタンタップからコンマ数秒～1秒程度遅れて、イベント発火する
• flatlistでのリスト表示のスクロールでカクつく
• スタックが溜まってくると画面によってはフリーズする(Google Mapの表示とかがひどかった記憶があります
• などなど。。。

とても世に出せる状態ではありませんでした。
確かテスト端末として利用してたのはHUAWEI p20 liteとかでした。
ちなみにAndroidでそんな状態でしたが、iOSではiPhone 6あたりでもテストしていましたが、ほぼぬるぬる動いている状態でした

試みたこと

上記のような状態でしたので、とにかく様々実践しました

• 画像ギャラリー
  • 表示で、画面表示時にすべての画像(MAX40枚とか)を一気に描画していたのを、表示画像の前後2枚分だけ裏で持っていく形に修正
  • これはなかなか効きました。ライブラリを選定しなおすみたいな選択肢もあったかなと思いますが
• 利用している画像ファイルの圧縮
  • それなりに画像ファイルを使っていたのと、昔iOSアプリをネイティブ(Objective-C)で開発していたころこういった対応をしていたなと思いだし
    • これはあまり効果はありませんでした。アプリ容量はかなり抑えられましたが(昔は容量に今よりシビアだったからだと後から思い出しました
• index.jsに**enableScreens();**の記述追加
  • これに関してはあまり理解できていないのですが、ボタンタップからのイベント発火や画面遷移がスムーズになりました
• Hermesの利用
  • 結果的にこれのおかげでどうにかなりました。すべてが爆速になりました。詳細は公式にわかりやすく記載されているので。。。
  • https://reactnative.dev/docs/hermes
  • 以下は公式の本文の翻訳。
  • Hermesは、AndroidでReactNativeアプリを実行するために最適化されたオープンソースのJavaScriptエンジンです。多くのアプリでは、Hermesを有効にすると、起動時間が改善され、メモリ使用量が減少し、アプリのサイズが小さくなります。

まとめ

最終的には、記述だけ見ると一行設定を入れただけで、解決したのですが、そこまでたどり着くのになかなか時間を要しました。同じようなことにハマったひとがいたとき解決のきっかけぐらいになれればと思い、投稿しました。

当時は対応しきれなかったのですが、デザインを再現するがためにその場しのぎで、ScrollViewの上にFlatlistのせるみたいな残念な作りになっていたので、他にもやれることは色々あったかなと思うので、次また新しくアプリを作るとなったときのために、また記事にしようかなと思います。
あまりまとまりがないまとめになってしまったんですが、最後まで読んでいただいてありがとうございました。