SplashScreenDemo

Splash screen in React Native

YOUTUBE VIDEO: https://youtu.be/rBMiusSqjCk

DEMO

Static image splash screen

Gif image splash screen

----------------------SPLASH SCREEN IN REACT NATIVE----------------------

1) Step 1

: Install necessary module 'react-native-splash-screen': npm i react-native-splash-screen --save

2) Step 2

: Link module 'react-native-splash-screen' to our project and do some settings to use splash screen:
a) Go to file 'MainApplication.java'
b) Add these lines into file 'android/settings.gradle'

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

c) Add this line into file 'android/app/build.gradle' in section 'dependencies'

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

d) In file 'MainApplication.java', using package 'SplashScreenReactPackage':

import org.devio.rn.splashscreen.SplashScreenReactPackage;

.....
@Override
protected List<ReactPackage> getPackages() {
    return Arrays.<ReactPackage>asList(
        new MainReactPackage(),
        new SplashScreenReactPackage() // here
    );
}

e) Settings: in file 'MainActivity.java' import package base on your module version 'react-native-splash-screen', my version >= 0.3.1

// react-native-splash-screen >= 0.3.1
import org.devio.rn.splashscreen.SplashScreen; // here
// react-native-splash-screen < 0.3.1
import com.cboy.rn.splashscreen.SplashScreen; // here

f) Import package Bundle (if it does not exist):

import android.os.Bundle; // here

g) After that, add this line to function 'onCreate()' or create if it does not exist

@Override
protected void onCreate(Bundle savedInstanceState) {
    SplashScreen.show(this);  // here
    super.onCreate(savedInstanceState);
}

3) Step 3

: Create file called 'launch_screen.xml' in folder 'android/app/src/main/res/layout' (create folder 'layout' if it does not exist). The contents of this file:

a) If you want to show static image as a splash screen, use this:

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

b) Or, If you want to show dynamic image (gif) as a splash screen, use this:

<?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">
    <pl.droidsonroids.gif.GifTextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/launch_screen"
    />
</RelativeLayout>

And also add this line in file 'android/app/build.gradle'

dependencies {
	...
    compile 'pl.droidsonroids.gif:android-gif-drawable:1.2.10' // here
    ...
}

4) Step 4

: Add image splash screen:

In 'Step 3': we have this line:

<ImageView android:layout_width="match_parent" android:layout_height="match_parent" android:src="@drawable/launch_screen" android:scaleType="centerCrop" />

or this line:

<pl.droidsonroids.gif.GifTextView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/launch_screen"
/>

And you see that we have '@drawable/launch_screen', here 'launch_screen' is the name of image as a splash screen in the folder 'drawable', so let create a folder 'drawable' in 'android/app/src/main/res/' and add image 'launch_screen' to this folder

5) Step 5

: It is time to show our splash screen, in component that you want to show splash screen:
a) Import module 'react-native-splash-screen':

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

b) I want to hide splash screen after 3 seconds:

constructor(props: Props) {
    super(props);

    this.state = {
        splashScreenTimer: null
    };
}

componentDidMount() {
    let splashScreenTimer = setInterval(this.hideSplashScreen, 3000); // hide splash screen after 3s
    this.setState({ splashScreenTimer });
    // you can also add sound here :D
}

hideSplashScreen = () => {
    SplashScreen.hide();
    clearInterval(this.state.splashScreenTimer);
}

THANK YOU FOR WATCHING VIDEO, REMEMBER TO LIKE AND SUBSCRIBE FOR NEW VIDEOS

uit2712 / splashscreendemo Goto Github PK