Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
React Nativeで Facebookのようなロード画面を実装する
okimotoren
May 21, 2021
Programming
1
620
React Nativeで Facebookのようなロード画面を実装する
こちらのブログにも記載しています。
https://zenn.dev/okimotoren/articles/9f4f97c90685e9
okimotoren
May 21, 2021
Tweet
Share
More Decks by okimotoren
See All by okimotoren
株式会社BeatFit エンジニア向け採用資料
okimotoren
0
34
Other Decks in Programming
See All in Programming
Reactive Microservices with Spring Boot and JHipster - Spring I/O 2022
mraible
PRO
1
230
ソフトウェアテストなんて他人事! だと思っていた私が始めた小さな取り組み
izumii19
0
330
heyにおけるSREの大切さ~マルチプロダクト運用の「楽しさ」と「難しさ」および今後の展望~
fufuhu
3
2.1k
About Type Syntax Proposal
quramy
1
1.2k
ebpfとWASMに思いを馳せる2022 / techfeed-conference-2022-ebpf-wasm-amsy810
masayaaoyama
0
760
How useEvent would change our applications
koba04
1
1.8k
デュアルトラックアジャイル× Agile Testingから 見えてきたQAのミライ
atamaplus
0
460
Unity Localization で多言語対応実装しよう / xrdnk-yokohamaunity-lt10-20220513
xrdnk
0
180
TextPruner による大規模言語モデルの軽量化 / Large language model pruning using TextPruner
misawann
0
330
Jakarta EE 10 is Coming Your Way
ivargrimstad
0
3.3k
全国の中高生がプログラミングを学んでいるCloud9環境の仕組み@JAWS-UG_SRE支部_#3
asache3
0
130
Cloud-Conference-Day-Spring Cloud + Spring Webflux: como desenvolver seu primeiro microsserviço reativo em Java?
kamilahsantos
1
150
Featured
See All Featured
Fantastic passwords and where to find them - at NoRuKo
philnash
25
1.5k
GraphQLとの向き合い方2022年版
quramy
16
8.1k
A Philosophy of Restraint
colly
192
14k
Docker and Python
trallard
27
1.5k
Building Better People: How to give real-time feedback that sticks.
wjessup
343
17k
Building Flexible Design Systems
yeseniaperezcruz
310
33k
Designing on Purpose - Digital PM Summit 2013
jponch
106
5.6k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
181
15k
Debugging Ruby Performance
tmm1
65
10k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
224
49k
The Invisible Side of Design
smashingmag
289
48k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
38
12k
Transcript
〜skeleton loadingの導入とライブラリ比較〜 React Nativeで Facebookのようなロード画面を実装する
自己紹介 れん / Ren Okimoto ・株式会社BeatFit ・RNでフロントエンドエンジニアしてます ・新卒1年目 ・関西出身 ・甘党です。
BeatFitについて ・音声フィットネスのアプリ ・リリース3年目 ・創業からReact Nativeを採用 ・backend は Ruby on Rails
・GraphQLへ移行中
新機能:みんなの広場 ・アプリ内のユーザー同士が関われるSNS/掲示板 ・コミュニティ機能の活性により、 データ量が指数関数的に増大し、 パフォーマンスが低下した。
・ローディング時間が長い ・ページのキャッシュが残るため、 一瞬だけ別ページが表示されてしまう パフォーマンス低下による2つの問題
Skeleton Loading 導入事例 Facebook、YouTube、Twitter UberEats、メルカリ、LINEなど。 特徴 シルエットを映すことで 体感の待ち時間を短縮できる
3 つの Skeleton ライブラリ ① react-content-loader (star : 11k、最終更新:6日前) ②
react-native-skeleton-placeholder (star : 280、最終更新:25日前) ③ rn-placeholder(star : 1.8k、最終更新:8ヶ月前)
react-content-loader ・最もStar 数が多く、活発なメンテナンス。 ・FacebookやInstagramのexampleとして設定されている ・こちらを最初に選定したが、問題が浮上。
ViewBox Style で、全体の座標位置を指定。 1. 再利用性が低い 2. Android, IOS のOS 間の差異が大きい
3. コードの可読性が悪い CSS の設定に問題
導入:react-native-skeleton-placeholder ・Viewでstyleの実装が可能
つまずいたこと 最新版の react-native-skeleton-placeholder がビルドに失敗。 → ライブラリの依存関係が原因であった。 同様の issue が立っていてたため、 githubで報告し、社内ではパッチを作って対処した。
1)ホーム画面から「みんなの広場」の投稿一覧 2)投稿一覧画面から、投稿の詳細画面 ※ページのキャッシュ問題を解決するために、 useEffectのクリーンアップ関数でstore のdata を空にする 処理をしています。 2箇所に skeleton
loadingを実装
まとめ ・Skeleton Loading の導入によって UX が改善された。 ・ページのキャッシュ問題が解決できた。 ・ライブラリーは複数存在したが、CSS の実装のしやすさから、
react-native-skeleton-placeholder を選定した。
ご清聴 ありがとうございました