React Native Splash Screen

React Native Splash Screen

Last 1 year working with react native. I will Explain Today how to create Splash Screen in react native.if you did not install React native check this installation link here. If you start this project you need to create one project. For example project name is splashscreen.

Here is the Step to Create Project:

• 1.       Create one folder Example : SplashScreen. Then go inside the splashscreen.
• 2.       Go to the cmd, then run this command
• 3.       React-native init splashscreen –version 0.59.3

And Then Hit enter form keyboard.

It will downloaded all necessary file from react native.

Then go to the splashscreen directory again . open the editor

Open android studio and go to this path app folder from android and you can see those picture in the down

Go to the res folder and create one folder write the name drawable.  And inside the drawable folder create background_splash.xml.

Paste this code in background_splash.xml

<?xml version="1.0" encoding="utf-8"?>

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

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

    <item

        android:drawable="@drawable/loadingpage"

        android:gravity="center"/>





</layer-list>

Loadingpage is the image which one i have include in drawable folder when splash screen will open it will that image that image. Just like this.

Inside the res folder create one folder name layout. Inside the layout folder create one xml page. Like this...

Go to the values folder and add some style and color. Follow the image. And create the color.xml

Go to the style xml page. And add the following line.

Now go to the Java Folder and create one java page SplashActivity.java

import android.content.Intent;

import android.os.Bundle;

import android.support.v7.app.AppCompatActivity;







public class SplashActivity extends AppCompatActivity {

    @Override

    protected void onCreate(Bundle saveInstanceState)

    {

        super.onCreate(saveInstanceState);

        Intent intent = new Intent(this, com.daffodilschool.MainActivity.class);

        startActivity(intent);

        finish();



    }

}

and open the mainactivity.java file

add this code in the mainactivity file.

import org.devio.rn.splashscreen.SplashScreen;

@Override

protected void onCreate(Bundle saveInstanceState)

{

    SplashScreen.show(this);

    super.onCreate(saveInstanceState);





}

Open the MainApplication.java

import org.devio.rn.splashscreen.SplashScreenReactPackage;

@Override

 protected List<ReactPackage> getPackages() {

   return Arrays.<ReactPackage>asList(

       new MainReactPackage(),

         new RNAdMobPackage(),

         new ReactVideoPackage(),

         new AsyncStoragePackage(),

         new RNGestureHandlerPackage(),

         new RNSoundPackage(),

         new VectorIconsPackage(),

         new SplashScreenReactPackage() // add this line only

   );

 }

And go to the androidmainfest.xml

Write the following code in application area :

Go to the React Native Terminal Run this line.

Npm add react-native-splash-screen@3.0.6 this is the last version of splash screen.

And run again react-native link.

Now go to the React native App.js file and import this

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

componentDidMount()

  {

    SplashScreen.hide();

  }

 

After the apps. It will work perfect.

# react native splash screen expo,react native splash screen tutorial,react native splash screen timeout,react native splash screen medium,create-react-native-app splash screen,uninstall react native splash screen,react native splash screen not showing,react navigation splash screen, react-native-splash-screen for android