furkankaya-react-native-splash-screen

Splash screen for React Native that hides automatically after the app loads, works on both iOS and Android

Content

• Installation
• Examples
• Getting started
• iOS Launch Screen Create Tutorial Video
• API

Examples

Installation

First step(Download):

Run

npm i furkankaya-react-native-splash-screen --save or yarn add furkankaya-react-native-splash-screen

Installation

Android:

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

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

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

...
dependencies {
    ...
    implementation project(':furkankaya-react-native-splash-screen')
}

Important Notice for React Native 0.73 and above

As of React Native 0.73, Kotlin has become the recommended language for Android development. This means that while the previous versions required changes to the MainApplication.java file, for React Native 0.73 and above, you need to make the necessary changes to the MainActivity.kt

react-native < 0.73

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

import org.devio.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;
    }
}

react-native >= 0.73

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

import com.facebook.react.ReactActivity
import com.facebook.react.ReactActivityDelegate
import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.fabricEnabled
import com.facebook.react.defaults.DefaultReactActivityDelegate

import org.devio.rn.splashscreen.SplashScreen;  //here
import android.os.Bundle //here

class MainActivity : ReactActivity() {
 
  override fun getMainComponentName(): String = "splashScreenTest"

 
  override fun onCreate(savedInstanceState: Bundle?) { // this function 
      SplashScreen.show(this) 
      super.onCreate(savedInstanceState)
    }

  override fun createReactActivityDelegate(): ReactActivityDelegate =
      DefaultReactActivityDelegate(this, mainComponentName, fabricEnabled)
}

iOS:

1. cd ios
2. run pod install

Third step(Plugin Configuration):

iOS:

Update AppDelegate.mm with the following additions:

#import "AppDelegate.h"

#import <React/RCTBundleURLProvider.h> 

#import "RNSplashScreen.h" //here

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  self.moduleName = @"splashTest";

  self.initialProps = @{};
  
  bool didLaunchFinish = [super application:application didFinishLaunchingWithOptions:launchOptions]; //here

  [RNSplashScreen show]; //here
  
  return didLaunchFinish; //here
}

@end

Example

Before

After

Getting started

Import furkan-kaya-react-native-splash-screen in your JS file.

import SplashScreen from 'furkan-kaya-react-native-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). The contents of the file should be the following:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ImageView android:layout_width="match_parent" android:layout_height="match_parent" android:src="@drawable/launch_screen" android:scaleType="centerCrop" />
</RelativeLayout>

iOS-LaunchScreen

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

Tutorial Video:

splash-screen-iOS.mp4

Usage

Use like so:

import SplashScreen from 'furkankaya-react-native-splash-screen';

const App = () => {

  useEffect(() => {
      SplashScreen.hide();
  }, []);
  
  return (
    ...
};

API

Method	Type	Optional	Description
show()	function	false	Open splash screen (Native Method )
hide()	function	false	Close splash screen