react-native-app-splash

React Native app splash library: programmatically show/hide for Android & iOS.

Content

• Installation
• Getting started
• API
• Testing
• Troubleshooting
• Contribution

Installation

First Step(Download):

1$ npm install --save react-native-app-splash

1$ yarn add react-native-app-splash

Manual Installation(If Needed)

Android:

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

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

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

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

iOS:

1. cd ios
2. run pod install

Second Step(Plugin Configuration):

Android:

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

java:

1import android.os.Bundle; // here
2import com.appsplash.AppSplash; // here
3
4public class MainActivity extends ReactActivity {
5   @Override
6    protected void onCreate(Bundle savedInstanceState) {
7        AppSplash.show(this);  // here
8        super.onCreate(null) // to fix Fragment constructor caused an exception
9    }
10    // ...other code
11}

kotlin:

1import android.os.Bundle; // here
2import com.appsplash.AppSplash; // here
3
4class MainActivity : ReactActivity() {
5
6    override fun onCreate(savedInstanceState: Bundle?) {
7        AppSplash.show(this)
8        super.onCreate(null) // to fix Fragment constructor caused an exception
9    }
10    // ...other code
11}

iOS:

Update AppDelegate.m with the following additions:

obj-c:

1#import "AppDelegate.h"
2
3#import <React/RCTBundleURLProvider.h>
4#import "AppSplash.h"  // here
5
6@implementation AppDelegate
7
8- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
9{
10    // ...other code
11    [super application:application didFinishLaunchingWithOptions:launchOptions];
12    [AppSplash show];  // here
13    return YES;
14}
15
16@end
17
18// ...other code
19

Getting started

Android:

Create a file called app_splash.xml in app/src/main/res/layout (create the layout-folder if it doesn't exist). The contents of the file should be the following:

1<?xml version="1.0" encoding="utf-8"?>
2<RelativeLayout 
3    xmlns:android="http://schemas.android.com/apk/res/android"
4    xmlns:tools="http://schemas.android.com/tools"
5    android:id="@+id/_dialog_parent"
6    android:layout_width="match_parent"
7    android:background="@android:color/white"
8    android:layout_height="match_parent">
9
10      <ImageView
11        android:id="@+id/_dialog_imageview"
12        android:layout_width="match_parent"
13        android:src="@drawable/app_splash"
14        android:layout_centerHorizontal="true"
15        android:layout_centerVertical="true"
16        android:layout_height="match_parent"
17        tools:ignore="ContentDescription" />
18
19</RelativeLayout>

Customize your launch screen by creating a app_splash.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 app splashs in the following folders:

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

Optional steps：

If you want the app splash to be full screen, Change your show method.

java/kotlin:

1AppSplash.show(this, true)

iOS

Customize your app splash via LaunchScreen.storyboard or LaunchScreen.xib。

Usage

Use like so:

1import AppSplash from 'react-native-app-splash';
2
3const App = () => {
4
5    React.useEffect(() => {
6        // do the needed action while app splash is shown
7        // After having done action hide the app splash
8        AppSplash?.hide()  
9    }, [])
10
11}
12export default App;

API

Method	Type	Optional	Description
show()	function	false	Open App Splash (Native Method )
show(final Activity activity, final boolean fullScreen)	function	false	Open App Splash (Native Method )
hide()	function	false	Close App Splash

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.

MIT Licensed