react-native-mixed-splash

This package is two packages in one.

IOS side: react-native-splash-screen
Android side: react-native-bootsplash

See instruction for integrate IOS in react-native-splash-screen, for Android in react-native-bootsplash.

For example

1. npm i --save

2. cd ios && pod install

IOS

Update AppDelegate.m with the following additions:

#import "AppDelegate.h"

#import <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h>
#import "RNSplashScreen.h"  // here

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    // ...other code
    [ReactNativeNavigation bootstrapWithDelegate:self launchOptions:launchOptions];
    [RNSplashScreen show];
    return YES;
}

@end

Android

Edit the android/app/src/main/java/com/yourprojectname/MainActivity.java file:

package com.orlev.miniut;

import com.reactnativenavigation.NavigationActivity;
import com.zoontek.rnbootsplash.RNBootSplash;
import android.os.Bundle;

public class MainActivity extends NavigationActivity {
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    RNBootSplash.init(R.drawable.splashscreen, MainActivity.this);
  }
}

Keep you AndroidManifest like this (android:theme="@style/AppTheme"):

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
  package="com.you.app">

    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.VIBRATE"/>

    <application
      android:name=".MainApplication"
      android:label="@string/app_name"
      android:icon="@mipmap/ic_launcher"
      android:roundIcon="@mipmap/ic_launcher_round"
      android:allowBackup="false"
      android:theme="@style/AppTheme"
      android:configChanges="keyboard|keyboardHidden|orientation|screenSize">

      <activity
        android:name=".MainActivity"
        android:label="@string/app_name"
        android:configChanges="keyboard|keyboardHidden|orientation|screenSize|uiMode"
        android:launchMode="singleTask"
        android:windowSoftInputMode="adjustPan">

Create splashscreen on android/app/src/main/res/drawable/splashscreen.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

  <item
    android:drawable="@color/splash_color" />

  <item
    android:width="233dp"
    android:height="386dp"
    android:drawable="@drawable/splash_icon"
    android:gravity="center" />

</layer-list>

Update styles file android/app/src/main/res/values/styles.xml

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
      <item name="android:windowExitAnimation">@android:anim/fade_out</item>
      <item name="android:windowBackground">@drawable/splashscreen</item>
      <item name="android:windowTranslucentStatus">true</item>
      <item name="android:windowDrawsSystemBarBackgrounds">false</item>
    </style>

</resources>

Usage in react native

import SplashScreen from "react-native-mixed-splash";


SplashScreen.hide(); // SplashScreen.show();