App Splash Screen

Outline
Installation
Link Libarary
- Upper 0.60
- Under 0.59
  - Fail To Link Library
How To Use
Completed
Reference

Outline

basically, RN(React Native) supports Splash screen. I’ve introduced how to use react-native-make tool to make Splash image in variety of sizes. you can see it to click the link below.

App icon & Splash image in React Native

however, when RN(React Native) is executed, Splash screen quickly ends. in normal app UX, Splash screen shows up and get informations via API in background. after getting informations, Splash screen ends and show the screen with informations. but it’s difficult to implement it with Splash screen which RN(React Native) supports basically.

in this blog, we’ll introduce how to use react-native-splash-screen library to end Splash screen when you want.

react-native-splash-screen official site: https://github.com/crazycodeboy/react-native-splash-screen

Installation

execute the command below to install react-native-splash-screen.

npm install --save react-native-splash-screen

Link Libarary

execute the command below to link react-native-splash-screen to RN(React Native) project.

Upper 0.60

cd ios
pod install
cd ..

Under 0.59

react-native link react-native-splash-screen

Fail To Link Library

if your environment is in the list below, highly, you would fail to link react-native-splash-screen to RN(React Native).

changed the package name in Android project.
use Pod in iOS.

I used both, so it took a long time to link. if you are in the situation above and fail to link, try to do below.

if you changed the package name in Android project. change the folder structure according to the package name in Android. for example, if the package name is io.github.dev.yakuza.blaboo, change the folder structure from com/blaboo to io/github/dev/yakuza/blaboo.
if you use Pod in iOS. I use the Git to the version control. below is for using the Git.

execute the command below to remove Pod.

  # cd ios
  pod deintegrate
  rm Podfile

execute the command below to install and link react-native-splash-screen library to RN(React Native).

  # React Native root directory
  npm install --save react-native-splash-screen
  react-native link react-native-splash-screen

after that, execute the command below to restore and reinstall Pod.

  # cd ios
  git checkout -- Podfile
  pod install

How To Use

we need to add the source code to Native and JS parts to use react-native-splash-screen on RN(React Native). the Native parts is to start the Splash screen on Android and iOS. JS part is to end the Splash screen.

Android

open and modify MainActivity.java file to use react-native-splash-screen on Android.

...
import android.os.Bundle; // here
import com.facebook.react.ReactActivity;
import org.devio.rn.splashscreen.SplashScreen; // here
...
public class MainActivity extends ReactActivity {
   @Override
    protected void onCreate(Bundle savedInstanceState) {
        SplashScreen.show(this);
        super.onCreate(savedInstanceState);
    }
    ...
}

also, we need to create Splash screen for Android. create android/app/src/main/res/layout/launch_screen.xml file and add the code below to it.

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

if you used generator-rn-toolbox(Splash Image) to generate the Splash images, Splash images were generated named launch_screen.png in darwable-*.

therefore, you can use above source code but if you have another name splash image file, you should modify launch_screen part to your file name in android:background="@drawable/launch_screen".

iOS

open and modify AppDelegate.m file to use react-native-splash-screen o iOS.

...
#import "RNSplashScreen.h"  // here

@implementation AppDelegate

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

@end

JS

add the source code below to end Splash screen we set above.

Functional Component

import React, { useEffect } from 'react'
import SplashScreen from 'react-native-splash-screen'
...
const WelcomePage = () => {
  ...
  useEffect(() => {
    SplashScreen.hide();
  }, []);
  ...
}

Class Component

...
import SplashScreen from 'react-native-splash-screen'
...
export default class WelcomePage extends Component {

    componentDidMount() {
    	...
      SplashScreen.hide();
    }
}

I think you already understand what to do. add SplashScreen.hide(); when you want to end Spalsh screen.

Completed

I had always the problem that Splash screen ended fastly. after I used react-native-splash-screen library, I can control Splash screen to make good UX.

in my case, if my app doesn’t use the network, I add the code below to keep the Splash screen for a while.

Functional Component

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

Class Component

componentDidMount() {
  ...
  setTimeout(() => {
      SplashScreen.hide();
  }, 1000);
}

if use the network, I end the Splash screen after getting all information via API.

you can use react-native-splash-screen to make better UX in your app too!

Reference

react-native-splash-screen official site: https://github.com/crazycodeboy/react-native-splash-screen

Github Sponsor

Buy me a coffee

Was my blog helpful? Please leave a comment at the bottom. it will be a great help to me!

App promotion

You can use the applications that are created by this blog writer Deku.
Deku created the applications with Flutter.

If you have interested, please try to download them for free.