【React Native】「react-native-animated-splash-screen」ライブラリを使ってスプラッシュアニメーションを実装する

最近、アプリのスプラッシュアニメーションの実装についてばかり投稿していますが…多分今回でそれも終わるはずです！
今回は「react-native-animated-splash-screen」ライブラリについてご紹介。
前回から紹介していた「react-native-animated-splash」がどうしても iOS で動いてくれなかったので…「react-native-animated-splash-screen」ライブラリを使用することにしました。

GitHub のページはこちらから。

GitHub – fabio-alss-freitas/react-native-animated-splash-screen: Animated splash screen component for React Native project.
https://github.com/fabio-alss-freitas/react-native-animated-splash-screen

ライブラリのインストールには下記コマンドを実行します。

npm install --save react-native-animated-splash-screen

上記が完了したら、あとはアプリの初期ページでライブラリをインポートし、<AnimatedSplash> で囲みます。

import AnimatedSplash from "react-native-animated-splash-screen";

<AnimatedSplash
  translucent={false}
  isLoaded={!this.state.isLoading}
  logoImage={require("./resources/img/logo.png")}
  backgroundColor={"#FFFFFF"}
  logoHeight={180}
  logoWidth={180}>
  <Stack.Navigator initialRouteName='top'>
    ......
  </Stack.Navigator>
</AnimatedSplash>

このアプリでは「React Navigation」を使用しているのですが、<Stack.Navigator> をまるっと囲んでしまえばOKでした。
で、このスプラッシュアニメーションは、isLoaded に true を指定すると非表示になるので、なにかしらの処理が完了したタイミングで値を false から true に変更してください。
また、translucent の値ですが、こちらが true に設定されているとき、アプリはステータスバーの下に描画されます。
実際に実行して動作を確認したところ、true に設定していた場合、アプリのページ上部がステータスバーの下に潜り込んでレイアウトが崩れたので、私の環境では false を設定しています。
処理としては以上です。

表示/非表示時のアニメーションの指定はできないものの、個人的にはデフォルトのアニメーションが結構お洒落なのでおすすめです。
また、customComponent が用意されており、こちらに画像のかわりに任意のコンポーネントを指定できるので、テキストと画像といった画面を表示することができます。
個人的には、「react-native-animated-splash-screen」ライブラリの方が実装がお手軽かなと思います。
このあたりは個人の好みに寄るので、是非両方を比べてみてください。

以上、React Native でスプラッシュアニメーションを実装できるライブラリ「react-native-animated-splash-screen」のご紹介でした。
ご参考になれば幸いです。