react-native-splash-screenでSplashScreenを追加する

最近はFlutterで遊んでいることが多いのですが、ReactNativeを触らないといけない状況がやってきそうなので適当なアプリを一本実装しながら勉強しています。

そんな中でReactNativeで書いているアプリにSplashScreenを追加しようとして微妙にハマったのでメモ。

SplashScreenの追加自体は以下のライブラリを使用しました。star数も多いし有名だし安心。

github.com

基本的には以下のリンクに沿って実装していました。

medium.com

が、画像が表示されず適当に作ったViewの画面しか表示されなかったので公式のREADMEを確認したところ、どうやらObjective-C側で参照するヘッダーの名前が変わっている模様。なので以下のように変更したら画像が表示されました。

- #import "SplashScreen.h"
+ #import "RNSplashScreen.h"

...

- [SplashScreen show]
+ [RNSplashScreen show]

まとめ

ライブラリのREADMEも親切だし、mediumの記事も大変親切だったのでかなり楽にSplashScreenを追加できました。とりあえず公式のREADMEは最初に読んだほうがよいと反省。

おまけ

アプリのSplashScreenに乗っける画像を作るのが面倒くさかったので以下のサービスで自動生成しました。ライセンスをしっかり確認できていないので微妙に不安ですが、綺麗にな画像がすぐ出来て非常にありがたいです。

hatchful.shopify.com