In this article, I’m gonna explain how you can set up Splash Screen in your React Native project.

You can also watch the video tutorial on my Youtube channel.

Install.

For more information, you can visit the package website

Run the command below in the project terminal

npm i react-native-splash-screen --save

Then we have to run the next command for automatically installing dependencies in your project.

npx react-native link

Image sets

To generate image sets we will use the App Icon Generator service

Select your image and press Generate.

Android set up

Update the MainActivity.java file located at android/src/app/main/java/com/your_project_name.

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

public class MainActivity extends ReactActivity {
   @Override
    protected void onCreate(Bundle savedInstanceState) {
        SplashScreen.show(this);
        super.onCreate(savedInstanceState);
    }
}

Now we need to create launch_screen.xml in app/src/main/res/layout

<?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>

Then paste image sets that you had generated before to app/src/main/res

Create colors.xml file in app/src/main/res/values and set next code

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="primary_dark">#000000</color>
</resources>

Update the App component.

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

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

After that, we have to rebuild our project.
Open the android folder in Android Studio and press rebuild

After rebuilding just restart your project.

npm run android

IOS set up

cd ios
pod install

Update AppDelegate.h in ios/your_project-name/

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

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  ....
  [RNSplashScreen show] <-- here;
  return YES;
}

Then open your_project_name.xcworkspace (ios folder) in Xcode.

Select images and create a new image set.

Drop images to the area of the image.

Remove selected elements.

Uncheck Safe Area Layout Guide.

Add Image element to screen (just move it).

Remove spacing and uncheck Constrain to margins.

Select the images set that you’ve created before and change content mode.

Rebuild the project.

After rebuilding just restart your project.

npm run ios

That’s all, we’ve set up a splash screen for IOS and Android.

Thanks for reading.

You can also read my previous article Build Splash Screen in React Native using Navigation v5.