Introduction
The splash screen, also known as the launch screen, is the initial screen a user sees when they open your app and remains visible while it loads. The splash screen is the initial screen that the user sees before they can access the rest of the features of your application.
Creating a splash screen in React Native has numerous advantages. It's used when an app needs to know something vital before it can start; for example, it must determine whether the user is authorized and which screen to display. It would be best to show a loader while the user waits for the app to initialize. Showing a loader as soon as the app starts helps you present an ordered, well-designed display to the user.
Click on the following link to read further: Hooks in React JS
Creating a splash screen (Android):
- Download
npm i react-native-splash-screen- Plugin Install
react-native link react-native-splash-screen-
Adding an image to the splash screen
Customize your launch screen by creating an image for your splash screen and name it "splash.png" (you can choose any name of your choice, but for the sake of understanding, we will refer to the image as "splash.png" in this tutorial)
Go to android/app/src/main/res. There you will find minmap folders.
drawable-ldpi
drawable-mdpi
drawable-hdpi
drawable-xhdpi
drawable-xxhdpi
drawable-xxxhdpi
Add "splash.png" to all minmap folders. - Make a folder called drawable in the android/app/src/main/res directory. Create a “background_splash.xml” file within that folder. Add the following code snippet to the file:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:drawable="@mipmap/splash"
android:gravity="fill" />
</layer-list>- Inside android/app/src/main/res directory, create a folder named “layout”(if doesn’t exist already). Inside that, create a file named “launch_screen.xml”. Add the following code snippet to the file:
<?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/background_splash"
/>- Go to res/values/styles.xml and add:
<style name="SplashTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:windowBackground">@drawable/background_splash</item>
</style>- To make your “AndroidManifest.xml” look like this, edit it:
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.splashexample">
<uses-permission android:name="android.permission.INTERNET" />
<application
android:name=".MainApplication"
android:label="@string/app_name"
android:icon="@mipmap/ic_launcher"
android:roundIcon="@mipmap/ic_launcher_round"
android:allowBackup="false"
android:theme="@style/AppTheme">
<activity
android:name=".SplashActivity"
android:theme="@style/SplashTheme"
android:label="@string/app_name">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
<activity
android:name=".MainActivity"
android:label="@string/app_name"
android:configChanges="keyboard|keyboardHidden|orientation|screenSize|uiMode"
android:launchMode="singleTask"
android:windowSoftInputMode="adjustResize"
android:exported="true">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>- Create "SplashActivity.java" in main/java/com/{your_package_name}
package com.splashexample; //change your package name
import android.content.Intent;
import android.os.Bundle;
import androidx.appcompat.app.AppCompatActivity;
public class SplashActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
Intent intent = new Intent(this, MainActivity.class);
startActivity(intent);
finish();
}
}- In the “MainActivity.java” file:
package com.splashexample; // change package name
import com.facebook.react.ReactActivity;
import org.devio.rn.splashscreen.SplashScreen; // add this
import android.os.Bundle; // add this
public class MainActivity extends ReactActivity {
/**
* Returns the name of the main component registered from JavaScript. This is used to schedule
* rendering of the component.
*/
@Override // add this
protected void onCreate(Bundle savedInstanceState) { // add this
SplashScreen.show(this); // add this
super.onCreate(savedInstanceState); // add this
} // add this
@Override
protected String getMainComponentName() {
return "splashexample";
}
}- Go to App.js in the src folder.
import SplashScreen from 'react-native-splash-screen' at top of the file;
Inside the App function add useEffect (Make sure to import it)
useEffect(() => {
SplashScreen.hide();
}, [])- Type in the terminal:
react-native run-android- Your splash screen is ready. Enjoy it.
Also see, React Native Reanimated
84+ registered