ReactNativeでフェードイン&フェードアウトするローディングを作ってみる

Pocket

アメリカの健康食品やサプリなんぞをAmazon感覚でポチっと買えるiHerbというサービスがあるのですが、そのAndroidアプリのローディングエフェクトが、ふわっと暗くフェードインして、ローディングが終わるとフェードアウトするような感じで、ちょっとオシャレだなと思ったのでReactNativeでそんなコンポーネントを作ってみました。

(※ ちなみに今アプリ見たら違うローディングエフェクトになってた・・・! 衝撃・・・!)

こんな感じ

Animatedを利用することでサクッとアニメーションを作れるのが良いですね。durationを変えることで、アニメーションの動きをもっと速くすることができます。

スクリーンショットで動いているコードについては以下のコードを参考ください。

https://github.com/mahm/MahlabKitchen/tree/master/src/screens/FadeLoading