react-native-lottie-splash-screen-tgp

Fork of react-native-lottie-splash-screen which is a fork of react-native-splash-screen.

Allows to use lottie animation files (JSON) for splash screen.

Works on IOS and Android.

Content

• Examples
• Installation
• Getting started
• API
• Contribution

Installation

First step(Download):

Run npm i react-native-lottie-splash-screen --save or yarn add react-native-lottie-splash-screen

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.

1react-native link react-native-lottie-splash-screen

Manual installation

Android:

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

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

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

1...
2dependencies {
3    ...
4    implementation project(':react-native-lottie-splash-screen')
5}

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

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

iOS:

1. cd ios
2. run pod install

OR

1. In XCode, in the project navigator, right click Libraries ➜ Add Files to [your project's name]

2. Go to node_modules ➜ react-native-lottie-splash-screen and add SplashScreen.xcodeproj

3. In XCode, in the project navigator, select your project. Add libSplashScreen.a to your project's Build Phases ➜ Link Binary With Libraries

4. 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:

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

iOS:

1. Create Dynamic.Swift with the following contents:

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

2. 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

3. 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:

4. Update AppDelegate.m with the following additions:

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

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"
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. That's all.

Usage

Use like so:

When the app is finished loading, hide the SplashScreen.

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

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

API

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