npmpackage.info

Gathering detailed insights and metrics for @attarchi/react-native-lottie-splash-screen

@attarchi/react-native-lottie-splash-screen - 2.0.4 | npmpackage.info

@attarchi/react-native-lottie-splash-screen

⚡ Lottie splash screen for your react native app!

2.0.4

228

MIT

Java

44.11 kB

2.5

Installations

npm install @attarchi/react-native-lottie-splash-screen

Developer Guide

BETA

Typescript

Yes

Module System

ESM

Node Version

18.20.4

NPM Version

10.7.0 Pull Requests

Open

2

Total

19

Closed

3

Merged

14

Issues

Open

25

Total

83

Closed

58

Releases

v1.0.0

Updated on Jul 08, 2022

View All 1 releases

Languages

Java

Objective-C

Swift

Ruby

JavaScript

Java (53.09%)

Objective-C (32.68%)

Swift (6.11%)

Ruby (5.43%)

JavaScript (2.69%)

Developer

HwangTaehyun

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

MIT License

228 Stars

222 Commits

65 Forks

4 Watchers

5 Branches

50 Contributors

Updated on May 23, 2025

Maintainers

View All 50 Contributors

Package Meta Information

Latest Version

2.0.4

Package Id

@attarchi/react-native-lottie-splash-screen@2.0.4

Unpacked Size

44.11 kB

Size

13.11 kB

File Count

NPM Version

10.7.0

Node Version

18.20.4

Published on

Oct 29, 2024

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

NaN

Compared to previous day

Last Week

NaN

Compared to previous week

Last Month

NaN

Compared to previous month

Last Year

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

lottie-ios lottie-react-native

Peer Dependencies

react-native

react-native-lottie-splash-screen

Fork of react-native-splash-screen and add implement for animation splash screen using airbnb lottie files.

Works on IOS and Android.

Examples

You can run examples in this project

react-native-lottie-splash-screen-Android

Installation

Versions compatibilities

React Native	react-native-lottie-splash-screen
>= 0.7x	2.x
< 0.70	1.x

Warning: Version 2.x has no backward compatibility. You need to follow the new setup instructions.

React-Native >= 0.70

First step (Download):

Run yarn add lottie-react-native@6.7.2 @attarchi/react-native-lottie-splash-screen

Second step (Plugin Installation):

The package is automatically linked when building the app. All you need to do is:

1cd ios && pod install

For android, the package will be linked automatically on build.

Third step (Adding Splash Screen To Native Code):

Android:

Update the MainActivity.kt file to use react-native-lottie-splash-screen via the following changes:

1// React-Native >= 0.70
2// MainActivity.kt file contents
3package com.examples
4
5import com.facebook.react.ReactActivity
6import com.facebook.react.ReactActivityDelegate
7import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.fabricEnabled
8import com.facebook.react.defaults.DefaultReactActivityDelegate
9
10import org.devio.rn.splashscreen.SplashScreen // Add this Line to your project
11import android.os.Bundle
12
13class MainActivity : ReactActivity() {
14
15  /* Add this function to your project */
16  override fun onCreate(savedInstanceState: Bundle?) {
17    super.onCreate(savedInstanceState)
18    SplashScreen.show(this, R.style.SplashScreen_SplashTheme, R.id.lottie)
19    // Skip waiting for the Lottie animation to finish
20    SplashScreen.setAnimationFinished(true)
21  }
22  /* End */
23
24
25  override fun getMainComponentName(): String = "examples"
26
27  override fun createReactActivityDelegate(): ReactActivityDelegate =
28      DefaultReactActivityDelegate(this, mainComponentName, fabricEnabled)
29
30}
31

Update styles.xml file in app/src/main/res/values and add these styles:

1<resources>
2    <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
3        <item name="android:editTextBackground">@drawable/rn_edit_text_material</item>
4    </style>
5    <!-- Copy these lines to you project. -->
6    <style name="SplashScreen_SplashAnimation">
7        <item name="android:windowExitAnimation">@android:anim/fade_out</item>
8    </style>
9
10    <style name="SplashScreen_SplashTheme" parent="Theme.AppCompat.NoActionBar">
11        <item name="android:windowAnimationStyle">@style/SplashScreen_SplashAnimation</item>
12    </style>
13    <!-- End of copy -->
14</resources>
15

iOS:

In Xcode open the ios folder > in Project Explorer> right click on your project name > New File... menu > select Swift File > Next > Type Dynamic.swift as the file name and select your project in Targets > Create. Copy these codes into Dynamic.swift file:

1// React-Native >= 0.70
2// Dynamic.swift file content
3import UIKit
4import Foundation
5import Lottie
6
7@objc class Dynamic: NSObject {
8
9  @objc func createAnimationView(rootView: UIView, lottieName: String) -> LottieAnimationView {
10    let animationView = LottieAnimationView(name: lottieName)
11    animationView.frame = rootView.frame
12    animationView.center = rootView.center
13    animationView.backgroundColor = UIColor.white;
14    return animationView;
15  }
16
17  @objc func play(animationView: LottieAnimationView) {
18    animationView.play(
19      completion: { (success) in
20        RNSplashScreen.setAnimationFinished(true)
21      }
22    );
23  }
24}
25
26

Xcode asks you to create the bridge header. Accept it. The content of [your-project-name]-Bridging-Header.h would be like this:

1// React-Native >= 0.70
2// [your-project-name]-Bridging-Header.h file content
3
4
5//  [your-project-name]-Bridging-Header.h
6
7#ifndef [your-project-name]_Bridging_Header_h
8#define [your-project-name]_Bridging_Header_h
9
10#import "RNSplashScreen.h" // here
11
12#endif /* [your-project-name]_Bridging_Header_h */
13
14

Update AppDelegate.mm with the following additions: (for react-native@0.71 proceed to 4.1)

1// React-Native >= 0.70
2// AppDelegate.mm file content
3
4#import "AppDelegate.h"
5#import <React/RCTBundleURLProvider.h>
6
7#import "RNSplashScreen.h" // Copy This line to your project
8#import "[your-project-name]-Swift.h" // Replace [your-project-name] with your project name
9
10@implementation AppDelegate
11
12// REPLACE application METHOD FROM HERE
13
14- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
15{
16  [FIRApp configure];
17  self.moduleName = @"[your-project-name]"; // Replace [your-project-name] with your project name
18  self.initialProps = @{};
19  // return [super application:application didFinishLaunchingWithOptions:launchOptions]; //This will be assigned as success instead
20 
21  BOOL success = [super application:application didFinishLaunchingWithOptions:launchOptions];
22 
23  if (success) {
24    //This is where we will put the logic to get access to rootview
25    UIView *rootView = self.window.rootViewController.view;
26    
27    rootView.backgroundColor = [UIColor whiteColor]; // change with your desired backgroundColor
28 
29    Dynamic *t = [Dynamic new];
30    UIView *animationUIView = (UIView *)[t createAnimationViewWithRootView:rootView lottieName:@"loading"]; // change lottieName to your lottie files name
31 
32    // register LottieSplashScreen to RNSplashScreen
33    [RNSplashScreen showLottieSplash:animationUIView inRootView:rootView];
34    // casting UIView type to AnimationView type
35    LottieAnimationView *animationView = (LottieAnimationView *) animationUIView;
36    // play
37    [t playWithAnimationView:animationView];
38    // Skip waiting for the Lottie animation to finish
39    [RNSplashScreen setAnimationFinished:true];
40  }
41 
42  return success;
43}
44// END OF CHANGES
45
46- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
47{
48...

For React Native version 0.69 or older

First step(Download):

Run yarn add lottie-ios@3.2.3 react-native-lottie-splash-screen@1.1.2

Second step(Plugin Installation):

React Native v0.60+

The package is automatically linked when building the app. All you need to do is:

1cd ios && pod install

For android, the package will be linked automatically on build.

For React Native version 0.59 or older

React Native <= v0.59

1// React-Native <= 0.59
2
3react-native link react-native-lottie-splash-screen

If you don't want to use the methods above, you can always do Manual installation.

Manual installation

Android (React-Native < 0.70):

In your android/settings.gradle file, make the following additions:

1// React-Native < 0.70
2
3include ':react-native-lottie-splash-screen'
4project(':react-native-lottie-splash-screen').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-lottie-splash-screen/android')

In your android/app/build.gradle file, add the :react-native-lottie-splash-screen project as a compile-time dependency:

1// React-Native < 0.70
2
3...
4dependencies {
5    ...
6    implementation project(':react-native-lottie-splash-screen')
7}

Update the MainApplication.java file to use react-native-lottie-splash-screen via the following changes:

1// React-Native < 0.70
2
3// react-native-lottie-splash-screen >= 0.3.1
4import org.devio.rn.splashscreen.SplashScreenReactPackage;
5// react-native-lottie-splash-screen < 0.3.1
6import com.cboy.rn.splashscreen.SplashScreenReactPackage;
7
8public class MainApplication extends Application implements ReactApplication {
9
10    private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
11        @Override
12        public boolean getUseDeveloperSupport() {
13            return BuildConfig.DEBUG;
14        }
15
16        @Override
17        protected List<ReactPackage> getPackages() {
18            return Arrays.<ReactPackage>asList(
19                    new MainReactPackage(),
20            new SplashScreenReactPackage()  //here
21            );
22        }
23    };
24
25    @Override
26    public ReactNativeHost getReactNativeHost() {
27        return mReactNativeHost;
28    }
29}

iOS: (React-Native < 0.70)

cd ios
run pod install

OR

In XCode, in the project navigator, right click Libraries ➜ Add Files to [your project's name]
Go to node_modules ➜ react-native-lottie-splash-screen and add SplashScreen.xcodeproj
In XCode, in the project navigator, select your project. Add libSplashScreen.a to your project's Build Phases ➜ Link Binary With Libraries
To fix 'RNSplashScreen.h' file not found, you have to select your project → Build Settings → Search Paths → Header Search Paths to add:

$(SRCROOT)/../node_modules/react-native-lottie-splash-screen/ios

Third step(Plugin Configuration):

Android:

Update the MainActivity.java to use react-native-lottie-splash-screen via the following changes:

1// React-Native < 0.70
2import android.os.Bundle;
3import com.facebook.react.ReactActivity;
4import org.devio.rn.splashscreen.SplashScreen; // here
5import android.os.Bundle;
6
7public class MainActivity extends ReactActivity {
8  @Override
9  protected void onCreate(Bundle savedInstanceState) {
10    SplashScreen.show(this, R.id.lottie); // here
11    SplashScreen.setAnimationFinished(true); // If you want the animation dialog to be forced to close when hide is called, use this code
12    super.onCreate(savedInstanceState);
13    // ...other code
14  }
15}

iOS:

Create Dynamic.swift with the following contents:

1// React-Native < 0.70
2import UIKit
3import Foundation
4import Lottie
5
6@objc class Dynamic: NSObject {
7
8  @objc func createAnimationView(rootView: UIView, lottieName: String) -> AnimationView {
9    let animationView = AnimationView(name: lottieName)
10    animationView.frame = rootView.frame
11    animationView.center = rootView.center
12    animationView.backgroundColor = UIColor.white;
13    return animationView;
14  }
15
16  @objc func play(animationView: AnimationView) {
17    animationView.play(
18      completion: { (success) in
19        RNSplashScreen.setAnimationFinished(true)
20      }
21    );
22  }
23}

Create [your-project-name]-Bridging-Header.h with the following contents:

1//  HyperMoney-Bridging-Header.h
2
3#ifndef HyperMoney_Bridging_Header_h
4#define HyperMoney_Bridging_Header_h
5
6#import "RNSplashScreen.h" // here
7
8#endif /* HyperMoney_Bridging_Header_h */
9

To use swift file in AppDelegate.m, follow next step.

https://developer.apple.com/documentation/swift/imported_c_and_objective-c_apis/importing_swift_into_objective-c

Import Swift code into Objective-C within the same framework:

Under Build Settings, in Packaging, make sure the Defines Module setting for that framework target is set to Yes.

Import the Swift code from that framework target into any Objective-C .m file within that target using this syntax and substituting the appropriate names:

Update AppDelegate.mm with the following additions: (for react-native@0.71 proceed to 4.1)

1// React-Native < 0.70
2
3#import "AppDelegate.h"
4
5#import <React/RCTBridge.h>
6#import <React/RCTBundleURLProvider.h>
7#import <React/RCTRootView.h>
8#import "RNSplashScreen.h" // here
9
10#import "HyperMoney-Swift.h" // here, change project name to yours
11
12@implementation AppDelegate
13
14- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
15{
16
17  // ...other code
18
19  /* here */
20  UIViewController *rootViewController = [UIViewController new];
21
22  rootViewController.view = rootView;
23
24  self.window.rootViewController = rootViewController;
25  [self.window makeKeyAndVisible];
26
27  Dynamic *t = [Dynamic new];
28  UIView *animationUIView = (UIView *)[t createAnimationViewWithRootView:rootView lottieName:@"loading"]; // change lottieName to your lottie files name
29  animationUIView.backgroundColor = [UIColor whiteColor]; // change backgroundColor
30
31  // register LottieSplashScreen to RNSplashScreen
32  [RNSplashScreen showLottieSplash:animationUIView inRootView:rootView];
33
34  // casting UIView type to AnimationView type
35  AnimationView *animationView = (AnimationView *) animationUIView;
36
37  // play
38  [t playWithAnimationView:animationView];
39
40  // If you want the animation layout to be forced to remove when hide is called, use this code
41  [RNSplashScreen setAnimationFinished:true];
42
43  /* here */
44
45  return YES;
46}

4.1 For React-Native version 0.71, in AppDelegate.mm rootView is no longer here. We need access to the rootView.

 - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  self.moduleName = @"YOUR_PROJECT_NAME";
  // You can add your custom initial props in the dictionary below.
  // They will be passed down to the ViewController used by React Native.
  self.initialProps = @{};
  // return [super application:application didFinishLaunchingWithOptions:launchOptions]; //This will be assigned as success instead
 
 BOOL success = [super application:application didFinishLaunchingWithOptions:launchOptions];
 
  if (success) {
    //This is where we will put the logic to get access to rootview
    UIView *rootView = self.window.rootViewController.view;
    
    rootView.backgroundColor = [UIColor whiteColor]; // change with your desired backgroundColor
 
    Dynamic *t = [Dynamic new];
    UIView *animationUIView = (UIView *)[t createAnimationViewWithRootView:rootView lottieName:@"logo_animated"]; // change lottieName to your lottie files name
 
    // register LottieSplashScreen to RNSplashScreen
    [RNSplashScreen showLottieSplash:animationUIView inRootView:rootView];
    // casting UIView type to AnimationView type
    AnimationView *animationView = (AnimationView *) animationUIView;
    // play
    [t playWithAnimationView:animationView];
    // If you want the animation layout to be forced to remove when hide is called, use this code
    [RNSplashScreen setAnimationFinished:true];
  }
 
  return success;
 
}

4.2 If your AppDelegate.swift is in swift:

  let rootViewController = UIViewController()
  rootViewController.view = rootView
  rootWindow.rootViewController = rootViewController
  rootWindow.makeKeyAndVisible()

  // start
  let t = Dynamic()
  let animationUIView: UIView = t.createAnimationView(rootView: rootView, lottieName:"Your_lottie_animation")

  RNSplashScreen.showLottieSplash(animationUIView, inRootView: rootView)
  
  animationUIView.frame = rootView.frame
  t.play(animationView: animationUIView as! AnimationView)
  RNSplashScreen.setAnimationFinished(true)
  // end

  return true

Getting started

Import react-native-lottie-splash-screen in your JS file.

import SplashScreen from 'react-native-lottie-splash-screen'

Android:

Create a file called launch_screen.xml in app/src/main/res/layout (create the layout-folder if it doesn't exist). Next, locate your lottie files in app/src/main/res/raw (loading.json in this example). The contents of the file should be the following:

1<?xml version="1.0" encoding="utf-8"?>
2<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
3    xmlns:app="http://schemas.android.com/apk/res-auto"
4    xmlns:tools="http://schemas.android.com/tools"
5    tools:context=".MainActivity"
6    android:orientation="vertical"
7    android:layout_width="match_parent"
8    android:layout_height="match_parent"
9    android:background="@color/white"
10  >
11    <com.airbnb.lottie.LottieAnimationView
12        android:id="@+id/lottie"
13        android:layout_width="match_parent"
14        android:layout_height="match_parent"
15        app:lottie_rawRes="@raw/loading"    <--  Your file name
16        app:lottie_autoPlay="true"
17        app:lottie_loop="false"
18        />
19</LinearLayout>

Customize your launch screen by creating a launch_screen.png-file and placing it in an appropriate drawable-folder. Android automatically scales drawable, so you do not necessarily need to provide images for all phone densities. You can create splash screens in the following folders:

drawable-ldpi
drawable-mdpi
drawable-hdpi
drawable-xhdpi
drawable-xxhdpi
drawable-xxxhdpi

iOS

Drag your lottie files to Xcode Project. Click Finish. That's all.

Expo bare workflow!!

It's really annoying to resolve issues with expo bare workflow because I do not use this 🥲. But a lot of developers want to use this project to expo bare workflow. So, If you managed to this, please star and share this project! That's a really big energy to me! :rocket::rocket::rocket:

You should use XCode 14.2 because there's some build issue.

https://github.com/expo/expo/issues/20777

If you had the following issue, you will resolve it with this strategy.

"Cannot find 'RNSplashScreen' in scope - Build iOS error" issue in Dynamic.swift #

You should insert the following code to AppDelegate.mm. Refer to this issue

1#import "RNSplashScreen.h" // here
2#import "ExpoModulesCore-Swift.h" // here
3#import "ExpoLSSTestApp-Swift.h" // here, change project name to yours

If you want to test in release mode, you should add this line to scripts in your package.json file. Once you run this script, you can build:release in Xcode!

1"build:ios": "react-native bundle --entry-file='index.js' --bundle-output='./ios/main.jsbundle' --dev=false --platform='ios'"
2j

Usage

Use like so:

When the app is finished loading, hide the LottieSplashScreen.

The contents of the App.js may be the following:

1import React, { useEffect } from "react";
2import LottieSplashScreen from "react-native-lottie-splash-screen";
3import RootNavigator from "@navi/RootNavigator";
4
5const App = () => {
6  useEffect(() => {
7    // Hide Lottie splash screen immediately; works when setAnimationFinished is true
8    LottieSplashScreen.hide(); // here
9  }, []);
10  return <RootNavigator />;
11};
12
13export default App;

API

Method	Type	Optional	Description
hide()	function	false	Close lottie splash screen

:sparkling_heart: Support the project

I open-source almost everything I can and try to reply to everyone needing help using these projects. Obviously, this takes time. You can use this service for free.

However, if you are using this project and are happy with it or just want to encourage me to continue creating stuff, there are a few ways you can do it:

Starring and sharing the project :rocket:
You can make one-time donations via buymeacoffee. I'll probably buy a coffee! :coffee:

Thanks! :heart:

Contribution

Issues are welcome. Please add a screenshot of you bug and a code snippet. Quickest way to solve issue is to reproduce it in one of the examples.

Pull requests are welcome. If you want to change the API or do something big it is best to create an issue and discuss it first.

MIT Licensed

No vulnerabilities found.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

License

Determines if the project has defined a license.

3

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Maintained

Determines if the project is "actively maintained".

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Fuzzing

Determines if the project uses fuzzing.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Score

2.5

/10

Last Scanned on 2025-07-07

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More