Repolode
Submit
seyedmostafahasani

seyedmostafahasani/react-native-splash-motion

Lottie and dotLottie splash screens for React Native that play natively from app launch, before the JavaScript bundle loads.

View on GitHub
Stars
44
Forks
1
Open issues
0
Last commit
13 hours ago

What is it?

SplashMotion is a React Native library for animated splash screens. Most animated splash approaches render through React, so the animation can only start after the JavaScript bundle has loaded. SplashMotion instead plays a Lottie or dotLottie animation in a native view from the first frame of launch, keeps it running while the bundle loads, and then exits with an optional outro and fade.

A CLI and an Expo config plugin generate the native launch screen, assets and theme at build time, so no manual AppDelegate or MainActivity edits are needed. The app calls hide() when it is ready, with options for waiting until the current loop finishes, playing a named outro marker, enforcing a minimum display time and setting fade duration. Animations can be given a first-frame PNG so the static launch screen matches the animation.

The library requires the React Native New Architecture and react-native-nitro-modules, targets iOS 15+ and Android 7+ (API 24), and is MIT licensed.

Key features

  • 01Plays Lottie .json and dotLottie .lottie animations natively.
  • 02Starts animation from the first frame of app launch, before the JS bundle loads.
  • 03Configures native launch screens automatically via CLI or Expo config plugin.
  • 04hide() can wait for the current loop, play an outro marker and fade out.
  • 05Optional first-frame PNG for a matching static launch screen.

Use cases

  • Showing a branded animated splash in a React Native app without a blank wait during JS startup.
  • Adding a polished exit animation that waits for app readiness such as fonts or navigation.
  • Using an existing After Effects or LottieFiles animation as a launch screen in an Expo or bare React Native project.

Quick start

  1. 1

    Install the package and Nitro Modules

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

    Generate the splash from your Lottie file

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

    Install iOS pods and rebuild the app

    cd ios && pod install
  4. 4

    Call SplashMotion.hide() once your app is ready

Things to know

  • Requires the React Native New Architecture, which is needed for Nitro Modules.
  • Expo projects need a development build because Expo Go cannot load custom native code.
  • Minimum versions are iOS 15 and Android 7 (API 24).
  • The project is young, with 37 stars and no release history shown in the metadata.

In collections

Android apps & phone tools

Topics

#react-native#lottie#splash-screen#animation#ios#android#expo#mobile-ui

FAQ

What is react-native-splash-motion?
Lottie and dotLottie splash screens for React Native that play natively from app launch, before the JavaScript bundle loads. SplashMotion is a React Native library for animated splash screens. Most animated splash approaches render through React, so the animation can only start after the JavaScript bundle has loaded. SplashMotion instead plays a Lottie or dotLottie animation in a native view from the first frame of launch, keeps it running while the bundle loads, and then exits with an optional outro and fade.
Is react-native-splash-motion free to use? What license does it have?
react-native-splash-motion is open source under the MIT license. Check the license terms before using it in commercial products.
Is react-native-splash-motion still maintained?
Actively maintained. The last commit to react-native-splash-motion was on Nov 6, 2026.
What can I use react-native-splash-motion for?
Showing a branded animated splash in a React Native app without a blank wait during JS startup. Adding a polished exit animation that waits for app readiness such as fonts or navigation. Using an existing After Effects or LottieFiles animation as a launch screen in an Expo or bare React Native project.
How do I install react-native-splash-motion?
Install the package and Nitro Modules: yarn add react-native-splash-motion react-native-nitro-modules Generate the splash from your Lottie file: npx splash-motion generate assets/splash.json --background "#0F6E56" Install iOS pods and rebuild the app: cd ios && pod install Call SplashMotion.hide() once your app is ready
Where can I get react-native-splash-motion?
The source code and installation instructions are on GitHub: https://github.com/seyedmostafahasani/react-native-splash-motion

Summary generated by AI from the project's README. GitHub stats refresh daily.

Related projects