Fork of react-native-splash-screen and add implement for animation splash screen using airbnb lottie files.
Works on IOS and Android.
Run npm i react-native-lottie-splash-screen --save
or yarn add react-native-lottie-splash-screen
The package is automatically linked when building the app. All you need to do is:
cd ios && pod install
For android, the package will be linked automatically on build.
For React Native version 0.59 or older
react-native link react-native-lottie-splash-screen
If you don't want to use the methods above, you can always do Manual installation.
Android:
- In your
android/settings.gradle
file, make the following additions:
include ':react-native-lottie-splash-screen'
project(':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:
...
dependencies {
...
implementation project(':react-native-lottie-splash-screen')
}
- Update the MainApplication.java file to use
react-native-lottie-splash-screen
via the following changes:
// react-native-lottie-splash-screen >= 0.3.1
import org.devio.rn.splashscreen.SplashScreenReactPackage;
// react-native-lottie-splash-screen < 0.3.1
import com.cboy.rn.splashscreen.SplashScreenReactPackage;
public class MainApplication extends Application implements ReactApplication {
private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
@Override
public boolean getUseDeveloperSupport() {
return BuildConfig.DEBUG;
}
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new SplashScreenReactPackage() //here
);
}
};
@Override
public ReactNativeHost getReactNativeHost() {
return mReactNativeHost;
}
}
iOS:
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 addSplashScreen.xcodeproj
-
In XCode, in the project navigator, select your project. Add
libSplashScreen.a
to your project'sBuild 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
Android:
Update the MainActivity.java
to use react-native-lottie-splash-screen
via the following changes:
import android.os.Bundle;
import com.facebook.react.ReactActivity;
import org.devio.rn.splashscreen.SplashScreen; // here
public class MainActivity extends ReactActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
SplashScreen.show(this, R.id.lottie); // here
SplashScreen.setAnimationFinished(true); // If you want the animation dialog to be forced to close when hide is called, use this code
super.onCreate(savedInstanceState);
// ...other code
}
}
iOS:
- Create
Dynamic.Swift
with the following contents:
import UIKit
import Foundation
import Lottie
@objc class Dynamic: NSObject {
@objc func createAnimationView(rootView: UIView, lottieName: String) -> AnimationView {
let animationView = AnimationView(name: lottieName)
animationView.frame = rootView.frame
animationView.center = rootView.center
animationView.backgroundColor = UIColor.white;
return animationView;
}
@objc func play(animationView: AnimationView) {
animationView.play(
completion: { (success) in
RNSplashScreen.setAnimationFinished(true)
}
);
}
}
- Create
[your-project-name]-Bridging-Header.h
with the following contents:
// HyperMoney-Bridging-Header.h
#ifndef HyperMoney_Bridging_Header_h
#define HyperMoney_Bridging_Header_h
#import "RNSplashScreen.h" // here
#endif /* HyperMoney_Bridging_Header_h */
- To use swift file in AppDelegate.m, follow next step.
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.m
with the following additions:
#import "AppDelegate.h"
#import <React/RCTBridge.h>
#import <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h>
#import "RNSplashScreen.h" // here
#import "HyperMoney-Swift.h" // here, change project name to yours
@implementation AppDelegate
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
// ...other code
/* here */
UIViewController *rootViewController = [UIViewController new];
rootViewController.view = rootView;
self.window.rootViewController = rootViewController;
[self.window makeKeyAndVisible];
Dynamic *t = [Dynamic new];
UIView *animationView = [t createAnimationViewWithRootView:rootView lottieName:@"loading"]; // change lottieName to your lottie files name
animationView.backgroundColor = [UIColor whiteColor]; // change backgroundColor
// register LottieSplashScreen to RNSplashScreen
[RNSplashScreen showLottieSplash:animationView inRootView:rootView];
// 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];
/* here */
return YES;
}
Import react-native-lottie-splash-screen
in your JS file.
import SplashScreen from 'react-native-lottie-splash-screen'
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:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
tools:context=".MainActivity"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/white"
>
<com.airbnb.lottie.LottieAnimationView
android:id="@+id/lottie"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:lottie_rawRes="@raw/loading"
app:lottie_autoPlay="true"
app:lottie_loop="false"
/>
</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
Drag your lottie files to Xcode Project. That's all.
Use like so:
When the app is finished loading, hide the SplashScreen.
The contents of the App.js may be the following:
import React, { useEffect } from "react";
import SplashScreen from "react-native-lottie-splash-screen";
import RootNavigator from "@navi/RootNavigator";
const App = () => {
useEffect(() => {
SplashScreen.hide(); // here
}, []);
return <RootNavigator />;
};
export default App;
Method | Type | Optional | Description |
---|---|---|---|
show() | function | false | Open splash screen (Native Method ) |
hide() | function | false | Close splash screen |
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.