Making Splash Screen in React-Native

                       Making Splash Screen in React-Native

👉What is splash screen in an app 

Android Splash Screen is the first screen visible to the user when the application's launched while some data for the next screens are fetched in the background. Through Splash Screen we can also show some animations , logo and engage our users . Is'nt its amazing , so lets lern how to make splash screen work .

You can design your own splash screen too and call it before our app.js loads

While i prefer is to use a component called react-native-splash-screen . There are two reason behind one is it shows our logo or animation whatever we have used in splash screen according to different screen resolution . Second is when we use our own splash screen and call it in app.js file then splash screen appears after a ms delay . In this period only white screen appears.

So I am going to tell you how to make splash screen through react-native-splash-screen . Open command prompt and run these two commands

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

npm link react-native-splash-screen

After this step we will perform following steps

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

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

Create a file called launch_screen.xml in app/src/main/res/layout (create the layout-folder if it doesn't exist)

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

Customize your launch screen by creating a launch_screen.png-file and placing it in an appropriate drawable-folder. Android automatically scales drawable, so you do not necessarily need to provide images for all phone densities. You can create splash screens in the following folders:

• drawable-ldpi
• drawable-mdpi
• drawable-hdpi
• drawable-xhdpi
• drawable-xxhdpi
• drawable-xxxhdpi

That's it if every thing goes write then you must be seeing an amazing splash screen