Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

こちらのブログにも記載しています。
https://zenn.dev/okimotoren/articles/9f4f97c90685e9

A3ff2968d61f14629ba14459d3abfd37?s=128

okimotoren

May 21, 2021
Tweet

Transcript

  1. 〜skeleton loadingの導入とライブラリ比較〜 React Nativeで Facebookのようなロード画面を実装する

  2. 自己紹介 れん / Ren Okimoto ・株式会社BeatFit ・RNでフロントエンドエンジニアしてます ・新卒1年目 ・関西出身 ・甘党です。

  3. BeatFitについて ・音声フィットネスのアプリ ・リリース3年目 ・創業からReact Nativeを採用 ・backend は Ruby on Rails

    ・GraphQLへ移行中
  4. 新機能:みんなの広場 ・アプリ内のユーザー同士が関われるSNS/掲示板 ・コミュニティ機能の活性により、  データ量が指数関数的に増大し、  パフォーマンスが低下した。

  5. ・ローディング時間が長い ・ページのキャッシュが残るため、  一瞬だけ別ページが表示されてしまう パフォーマンス低下による2つの問題

  6. Skeleton Loading 導入事例 Facebook、YouTube、Twitter UberEats、メルカリ、LINEなど。 特徴 シルエットを映すことで 体感の待ち時間を短縮できる

  7. 3 つの Skeleton ライブラリ ① react-content-loader (star : 11k、最終更新:6日前) ②

    react-native-skeleton-placeholder (star : 280、最終更新:25日前) ③ rn-placeholder(star : 1.8k、最終更新:8ヶ月前)
  8. react-content-loader ・最もStar 数が多く、活発なメンテナンス。 ・FacebookやInstagramのexampleとして設定されている ・こちらを最初に選定したが、問題が浮上。

  9. ViewBox Style で、全体の座標位置を指定。 1. 再利用性が低い 2. Android, IOS のOS 間の差異が大きい

    3. コードの可読性が悪い CSS の設定に問題
  10. 導入:react-native-skeleton-placeholder ・Viewでstyleの実装が可能

  11. つまずいたこと 最新版の react-native-skeleton-placeholder がビルドに失敗。 → ライブラリの依存関係が原因であった。 同様の issue が立っていてたため、 githubで報告し、社内ではパッチを作って対処した。

  12. 1)ホーム画面から「みんなの広場」の投稿一覧 2)投稿一覧画面から、投稿の詳細画面 ※ページのキャッシュ問題を解決するために、     useEffectのクリーンアップ関数でstore のdata を空にする 処理をしています。 2箇所に skeleton

    loadingを実装
  13. まとめ ・Skeleton Loading の導入によって UX が改善された。 ・ページのキャッシュ問題が解決できた。 ・ライブラリーは複数存在したが、CSS の実装のしやすさから、   

    react-native-skeleton-placeholder を選定した。
  14. ご清聴 ありがとうございました