React NativeでFacebookのようなロード画面をskeleton loadingで実装する

こんにちは。れんです。
BeatFitというスタートアップでフロントエンドエンジニアをしています。

今回は、Facebookみたいな躍動感のあるかっこいいロード画面を作ることになり、いろんなライブラリを見たり試したりしたので、こちらにまとめます！

想定読者

・これからReact Nativeでロード画面を実装したい方
・ロード画面に用いるライブラリが決まっていない方
・skeleton loadingの実装について詳しく知りたい方

そんな方々にとって、参考になれば幸いです。

導入の背景

弊社の新しいSNS機能において、loadingが遅いという課題を抱えていました。
そこで、パフォーマンス改善を試みるのと同時に、loading画面でUXを改善できないか？と考えました。

そこで注目したのが、skeleton loadingです。

”いまどき”なUI skeleton loading

skeleton loading とは、loading中にシルエットのみを映す機能です。これによって、ユーザーの体感的な待ち時間を短縮させることができます。

“いまどき” のアプリがこぞって導入しています。
Facebook、YouTube、Twitter、Netflix、UberEats、メルカリ、LINE、Wantedlyなどなど。

ライブラリの選定

ここからが本題です。
もしライブラリの選定に悩んでるよ！って方がいれば参考になれば嬉しいです！
そんなのいいからとにかく結論Hey!!って方は、次のタイトルからお読みください。

React Nativeで良さそうだったのは以下3つ。

①react-native-skeleton-placeholder
メリット：
・react-native向けのライブラリ
・最終更新が23日前とかなりメンテナンス頻度
・Viewでstyleできる

懸念点
・star 278と少なめ

②react-content-loader
メリット：
・star 10.8kと圧倒的に使われている
・最終更新が4日前
・基本はReact.js向けのようだが、ReactNativeの使われ方も想定されている
・Facebook, instagramなどのexamplesが用意されている
・Troubleshooting（responsiveなど）も丁寧に解説されている

懸念点
・styleの書き方が座標になっていて、書きづらい

③rn-placeholder
メリット：
・star 1.8kとかなり使われている
・Readmeが丁寧に書かれている

懸念点
・最終更新が7ヶ月前（2020/9)と若干メンテナンスが滞っている（今後も更新されない可能性が高い）

上記から、①と②を実際に実装してみました。
最終的に①react-native-skeleton-placeholder を導入することにしました！
（選定理由の詳細は「途中で困ったこと」に記載します）

かなりいい感じ！ 新しく生まれ変わった！！

react-native-skeleton-placeholder を使って、かなりいい感じに実装できました。

今回の実装により、
ユーザーからの体感の待ち時間が段違いに短くなり、
画面遷移におけるUIの軽微なバグも消えました。

途中で困ったこと

困ったこと1：　styleの指定の方法について

react-content-loader は非常に良いライブラリなのですが、今回導入を見送った理由は、styleの指定の仕方が座標だったことです。

そのため、viewportでのY座標が端末ごとにバラバラになり、UIの調整が難しかったです。
下のsimulatorも良く見ると少しズレてしまっていますよね。困ります。

また、以下のようにコードの可読性もかなり悪くなります。

（カオス。。）

そういった経緯で、 react-native-skeleton-placeholder を使うことにしました。
こちらのライブラリでは、以下のようにViewでstyleを指定できました。結果として、ロード前後のstyleのズレがほとんどなくなりました。

困ったこと2：　ライブラリにバグが見つかり、ビルドできなかった

react-native-skeleton-placeholder では、新しいアップデートにバグが見つかり、自前でソースコードを修正することになりました。
githubにissueが立っていて、コメントもしたので、少ししたら解決するのではないかと思います。

終わりに

react-native-skeleton-placeholder は非常に良いライブラリです！
starの数が少なくて迷っている方がいたら、ぜひチャレンジしてみてください！
そして一緒により良いライブラリにしましょう。

また、今回は特に使用しませんでしたが、
Animationやcolorも変更できるため、皆さんのアプリに合ったskeletonを実装してみてください！

それではまた！