seyedmostafahasani/react-native-splash-motion

これは何？

主な機能

• 01Lottieの.jsonアニメーションとdotLottieの.lottieアニメーションをネイティブ再生します。
• 02アプリ起動直後の最初のフレームから、JSバンドルの読み込み前にアニメーションを開始します。
• 03CLIまたはExpo config pluginでネイティブの起動画面を自動設定します。
• 04hide()で現在のループ終了を待ち、アウトロマーカーを再生してからフェードアウトできます。
• 05静止状態の起動画面と見た目を合わせるための最初のフレームのPNGを任意で指定できます。

ユースケース

• JSの起動中に空白のまま待たせず、React Nativeアプリにブランドを反映したアニメーション付きスプラッシュ画面を表示する。
• フォントやナビゲーションなど、アプリの準備が整うまで待つ、仕上がりのよい終了アニメーションを追加する。
• 既存のAfter EffectsまたはLottieFilesのアニメーションを、Expoまたはbare React Nativeプロジェクトの起動画面に使う。

クイックスタート

1. 1

   パッケージとNitro Modulesをインストールする

   yarn add react-native-splash-motion react-native-nitro-modules
2. 2

   Lottieファイルからスプラッシュ画面を生成する

   npx splash-motion generate assets/splash.json --background "#0F6E56"
3. 3

   iOSのPodsをインストールしてアプリを再ビルドする

   cd ios && pod install
4. 4

   アプリの準備ができたらSplashMotion.hide()を呼び出す

使う前に知っておきたいこと

• !Nitro Modulesに必要なReact Native New Architectureが必要です。
• !Expo Goではカスタムネイティブコードを読み込めないため、Expoプロジェクトではdevelopment buildが必要です。
• !最低対応バージョンはiOS 15とAndroid 7（API 24）です。
• !まだ新しいプロジェクトで、スターは37個、メタデータにはリリース履歴が表示されていません。

収録されている特集

トピック

よくある質問

react-native-splash-motion とは？

JavaScriptバンドルの読み込み前、アプリ起動直後からネイティブ再生できるReact Native向けLottie・dotLottieスプラッシュ画面。 SplashMotionは、アニメーション付きスプラッシュ画面を実現するReact Nativeライブラリです。多くのアニメーション付きスプラッシュ画面はReact経由で描画されるため、アニメーションを開始できるのはJavaScriptバンドルの読み込み後です。一方SplashMotionは、起動した最初のフレームからネイティブビューでLottieまたはdotLottieアニメーションを再生し、バンドルの読み込み中も再生を続けた後、任意のアウトロとフェードを付けて終了します。

react-native-splash-motion は無料で使えますか？ライセンスは？

react-native-splash-motion は MIT ライセンスのオープンソースです。商用製品で使う前にライセンス条件を確認してください。

react-native-splash-motion は今もメンテナンスされていますか？

活発にメンテナンス中。react-native-splash-motion の最終コミットは 2026年11月6日 です。

react-native-splash-motion は何に使えますか？

JSの起動中に空白のまま待たせず、React Nativeアプリにブランドを反映したアニメーション付きスプラッシュ画面を表示する。 フォントやナビゲーションなど、アプリの準備が整うまで待つ、仕上がりのよい終了アニメーションを追加する。 既存のAfter EffectsまたはLottieFilesのアニメーションを、Expoまたはbare React Nativeプロジェクトの起動画面に使う。

react-native-splash-motion のインストール方法は？

パッケージとNitro Modulesをインストールする: yarn add react-native-splash-motion react-native-nitro-modules Lottieファイルからスプラッシュ画面を生成する: npx splash-motion generate assets/splash.json --background "#0F6E56" iOSのPodsをインストールしてアプリを再ビルドする: cd ios && pod install アプリの準備ができたらSplashMotion.hide()を呼び出す

react-native-splash-motion はどこで入手できますか？

ソースコードとインストール手順は GitHub にあります：https://github.com/seyedmostafahasani/react-native-splash-motion