A lottie splash screen for react-native with Swift implementation, hide when application loaded ,it works on iOS and Android.
npm install @attarchi/react-native-lottie-splash-screen
Fork of react-native-splash-screen with animated splash screen using Airbnb Lottie. Works on iOS and Android.
Huge thanks to the original authors and contributors of react-native-lottie-splash-screen. The original package became outdated and PRs/issues went unanswered. To keep it maintained and compatible with new React Native versions, this updated package is published under my namespace as @attarchi/react-native-lottie-splash-screen.
!react-native-lottie-splash-screen-Android
!react-native-lottie-splash-screen-iOS
You can clone this project and run the examples with these commands:
``bash
yarn install
`
Follow these steps in order.
`bash
yarn add @attarchi/react-native-lottie-splash-screen lottie-react-native@7.3.1
cd ios && bundle install && bundle exec pod install
`
1. Add your Lottie JSON (e.g. loading.json) to the Xcode project and include it in the app target.
How to add Lottie JSON to Xcode project
Drag your lottie files to Xcode Project. Click Finish. That's all.
2. Open AppDelegate.swift in the ios folder and add the setup call:
`swift
import UIKit
...
import SplashScreen // <- Add this line
@main
class AppDelegate: UIResponder, UIApplicationDelegate {
func application(...) -> Bool {
...
// Before return, add this:
// Setup Lottie splash screen using the SplashScreen module
SplashScreen.setupLottieSplash(in: window, lottieName: "loading", backgroundColor: UIColor.white, forceToCloseByHideMethod: false)
return true
}
}
`
3. Remove the default iOS launch screen.
By default, iOS displays the launch storyboard before your app is ready. To ensure a seamless transition to your Lottie splash, you should make the launch screen blank or match the first frame of your Lottie animation.
To make it blank, open the LaunchScreen.storyboard file in the ios folder and remove the section from the main . This will prevent any default labels or images from appearing.
4. Build iOS once to verify.
1. Create android/app/src/main/res/layout/launch_screen.xml:
`xml`
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/windowSplashScreenBackground">
android:layout_width="match_parent"
android:layout_height="match_parent"
app:lottie_rawRes="@raw/loading"
app:lottie_autoPlay="false"
app:lottie_loop="false" />
2. Place your Lottie JSON at android/app/src/main/res/raw/loading.json.android/app/src/main/res/values/styles.xml
3. Ensure styles exist at :
`xml
`
4. Ensure color exists at android/app/src/main/res/values/colors.xml:
`xml`
5. Update MainActivity.kt:
`kotlin
...
import com.facebook.react.defaults.DefaultReactActivityDelegate
import org.devio.rn.splashscreen.SplashScreen // <- Add this line
import android.os.Bundle
class MainActivity : ReactActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
// Add the below line at the bottom of the onCreate function:
SplashScreen.show(this, R.style.SplashScreen_SplashTheme, R.id.lottie, false)
}
...
`
6. Build Android to verify.
##
This package supports Expo Bare projects. It does not work in the Expo Go App.
Follow these steps.
`bash`
npx expo prebuild -p android
npx expo prebuild -p ios
- Run the Installation steps above (packages, iOS and Android setup).
- Android manifest: set your MainActivity theme to @style/AppTheme (not Expo’s splash theme).MainActivity.kt
- In , ensure:
`kotlin`
setTheme(R.style.AppTheme)
super.onCreate(null)
SplashScreen.show(this, R.style.SplashScreen_SplashTheme, R.id.lottie, false) // This line
- iOS: Add your Lottie JSON and call SplashScreen.setupLottieSplash(...) in AppDelegate.swift as shown above.
`bash`
yarn android
yarn ios
Use these instead of yarn start to see the native splash overlay. See this commit for a working Expo example configuration.
1. Import in your app entry and hide once the app is ready:
`js
import { useEffect } from "react";
import LottieSplashScreen from "@attarchi/react-native-lottie-splash-screen";
export default function App() {
useEffect(() => {
// Hide the splash screen when your app is ready.
// The optional chaining (?.) is important for Expo projects.
LottieSplashScreen?.hide();
}, []);
return null;
}
`
| Method | Type | Optional | Description |
| ------ | -------- | -------- | ----------- |
| hide() | function | false | Closes the Lottie splash overlay |
You can see all needed changes together in these commits:
- iOS
- Android
Or follow this upgrade instruction:
1. Update packages:
`bash`
yarn add @attarchi/react-native-lottie-splash-screen@^3 lottie-react-native@^7
cd ios && bundle exec pod install
2. iOS changes:
- Remove any previous Dynamic.swift and bridging-header usage.AppDelegate.swift
- Add your Lottie JSON to the app target if not present.
- Add following codes in :
`swift`
import SplashScreen
SplashScreen.setupLottieSplash(in: window, lottieName: "loading", backgroundColor: UIColor.white, forceToCloseByHideMethod: false)
3. Android changes:
- Replace any SplashScreen.show(this, R.style.SplashScreen_SplashTheme, R.id.lottie) with:
`kotlin`
SplashScreen.show(this, R.style.SplashScreen_SplashTheme, R.id.lottie, false)
- Remove SplashScreen.setAnimationFinished(true) from onCreate.launch_screen.xml
- Ensure uses app:lottie_autoPlay="false" and the layout/background/styles/colors from the Installation section.
4. JS:
- Keep LottieSplashScreen?.hide()` when your app is ready.
Issues and PRs are welcome. The fastest way to receive help is to include a minimal repro (you can base it on the examples in this repo).
---