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

3 min read

こんにちは。れんです。
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を実装してみてください!

それではまた!