【React Native】「react-native-animated-splash」ライブラリでアプリのスプラッシュアニメーションを追加する

タイトル通り、「react-native-animated-splash」ライブラリを使用して、アプリ起動時のスプラッシュアニメーションを追加する方法についてです。
スプラッシュアニメーションを追加できるライブラリは、他にも「react-native-animated-splash-screen」がありましたが、「react-native-animated-splash」ライブラリの方が、画像表示時やスプラッシュを非表示にするときのアニメーションの種類が豊富だったので、こちらをチョイスしました。
このあたりは、実装したいスプラッシュアニメーションによって判断してください。

GitHub のページはこちら。

GitHub – Blitz-Mobile-Apps/react-native-animated-splash: React-Native-Animated-Splash-Screen is developed to help the react-native developers in speeding-up their development process. This package leverages the developer from implementing native animations by using our builtin classes for animation with easy to use api, all the animations run on native thread for smooth performance and js is loaded behind the
https://github.com/Blitz-Mobile-Apps/react-native-animated-splash

では、実装していきます。
なお今回は Android での実装方法のみです。

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

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

次に、/android/app/src/main/res を開き、drawable-XXXX のディレクトリに、スプラッシュアニメーションで表示したい画像を追加していきます。
画像サイズがよく分からなかったので、すべて同じ画像を追加しましたが、それで問題ないようです。

次に、Android Studio を起動し、MainActivity.java を開きます。
こちらに、スプラッシュアニメーションの設定を追加していきます。
なお、実装の際は https://github.com/Blitz-Mobile-Apps/react-native-animated-splash/blob/master/androidexample.md のサンプルコードを参考にしました。

MainActivity.java のコード全文はこちら。
initiateSplash() にスプラッシュアニメーションの設定を記述し、onCreate() で initiateSplash() を呼び出しています。

package [アプリのアプリケーションID];

import android.os.Bundle;

import com.facebook.react.ReactActivity;
import com.blitzapp.animatedsplash.animation.GroupAnimation;
import com.blitzapp.animatedsplash.animation.AddImageView;

import static com.blitzapp.animatedsplash.animation.AddImageView.getCenterX;
import static com.blitzapp.animatedsplash.animation.AddImageView.getCenterY;
import static com.blitzapp.animatedsplash.animation.Splash.SPLASHFADE;
import static com.blitzapp.animatedsplash.animation.Splash.FADE;
import static com.blitzapp.animatedsplash.animation.Splash.createSplashView;
import static com.blitzapp.animatedsplash.animation.Splash.screenHeight;
import static com.blitzapp.animatedsplash.animation.Splash.screenWidth;
import static com.blitzapp.animatedsplash.animation.Splash.setBackgroundColor;
import static com.blitzapp.animatedsplash.animation.Splash.setSplashHideAnimation;
import static com.blitzapp.animatedsplash.animation.Splash.setSplashHideDelay;
import static com.blitzapp.animatedsplash.animation.Splash.splashShow;

public class MainActivity extends ReactActivity {

  /**
   * Returns the name of the main component registered from JavaScript. This is used to schedule
   * rendering of the component.
   */
  @Override
  protected String getMainComponentName() {
    return "[アプリ名]";
  }

  public void onCreate(Bundle bundle) {
    super.onCreate(bundle);
    initiateSplash();
  }
  public void initiateSplash() {
    // create dialog
    createSplashView(MainActivity.this);
    // set background color
    setBackgroundColor("#FFFFFF");
    // set splash hide animation
    setSplashHideAnimation(SPLASHFADE);
    // set splash hide delay
    setSplashHideDelay(100);

    // create and add images to view
    AddImageView logo = new AddImageView(
            R.drawable.logo,
            screenHeight * 0.3, screenWidth * 0.5,
            getCenterX(screenWidth * 0.5), getCenterY(screenHeight * 0.25),
            0, AddImageView.FIT_CENTER, false);
    GroupAnimation.performGroupAnimation(logo, FADE, 400, 0f, 1f, false);

    splashShow();
  }
}

なお、drawable ディレクトリに追加した画像は 48行目で指定しています。
今回は、画像ファイル名が logo.png だったので R.drawable.logo としていますが、ファイル名に応じて適宜変更してください。

次に、スプラッシュアニメーションを非表示にする処理を、アプリの初期ページに追加します。
最初に、ライブラリをインポートします。

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

そして、スプラッシュアニメーションを非表示にしたいタイミングで下記を実行します。

AnimatedSplash.hide();

私は初期ページの componentDidMount() で呼び出すようにしたところ、良い感じに消えてくれました。
追加する処理は以上です。
Android Studio でコーディングするのが久しぶり過ぎて若干まごつきましたが、ほぼサンプルコードをまるっとコピー&ペーストすれば大丈夫でした。
むしろ、ロゴ画像のサイズと表示位置を調節するのと、スプラッシュを非表示にするときの時間の調整がなかなかうまくいかなくて、何度もアプリを起動しなおしました。

上記を実装すると、白背景の中央にロゴ画像がふわーっとフェードインアニメーションで表示されます。
そしてしばらく経ち、初期画面の指定が終わったタイミングで、またふわーっとフェードアウトします。
なお、今回はフェードイン・フェードアウトしか使いませんでしたが、他にも 画像をズームインして表示されるアニメーションや、スプラッシュを下にスライドして非表示にしたりできます。
このあたりは、GitHub のページに Gif アニメーション画像がいくつかあるので、そちらをご参考にして下さい。

以上、React Native でスプラッシュアニメーションを実装する方法についてでした。
ご参考になれば幸いです。