Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
React Nativeで Facebookのようなロード画面を実装する
Search
okimotoren
May 21, 2021
Programming
1
1.2k
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
60
Other Decks in Programming
See All in Programming
アメ車でサンノゼを走ってきたよ!
s_shimotori
0
230
CSC509 Lecture 04
javiergs
PRO
0
300
Developer Joy - The New Paradigm
hollycummins
1
260
株式会社 Sun terras カンパニーデック
sunterras
0
380
タスクの特性や不確実性に応じた最適な作業スタイルの選択(ペアプロ・モブプロ・ソロプロ)と実践 / Optimal Work Style Selection: Pair, Mob, or Solo Programming.
honyanya
3
180
CSC509 Lecture 05
javiergs
PRO
0
310
オープンソースソフトウェアへの解像度🔬
utam0k
16
3.1k
釣り地図SNSにおける有料機能の実装
nokonoko1203
0
190
iOSでSVG画像を扱う
kishikawakatsumi
0
140
TFLintカスタムプラグインで始める Terraformコード品質管理
bells17
2
330
Cursorハンズオン実践!
eltociear
2
1.2k
Android16 Migration Stories ~Building a Pattern for Android OS upgrades~
reoandroider
0
130
Featured
See All Featured
The Language of Interfaces
destraynor
162
25k
Bash Introduction
62gerente
615
210k
Building an army of robots
kneath
306
46k
The Illustrated Children's Guide to Kubernetes
chrisshort
49
51k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.6k
The Straight Up "How To Draw Better" Workshop
denniskardys
238
140k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
46
2.5k
BBQ
matthewcrist
89
9.8k
It's Worth the Effort
3n
187
28k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
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 を選定した。
ご清聴 ありがとうございました