Splash Screen in Android App — React Native
If you are using React Native for Android App development and ever thought of using a splash screen for it, then the first thing that comes to your mind might be displaying a screen in your navigation stack and then proceeding with your major application logic. Well, I thought of the same and noticed one problem with this. With mobile phones with slower processors and focused users, you can definitely see a flicker of screen when you switch form your “splash” screen to main screen. Well Android already provides us capability to add splash screen to use.
Tools used:
1. React Native => 0.63.1
2. React => 16.13.1
If you haven’t, first set up React Native project. To learn how, follow the docs. I created a test application for the same purpose.
When you’re done with the application setup, we will need to install a package, react-native-splash-screen. Also link the package. with the command.
npx react-native link react-native-splash-screen
You can check your package name in AndroidManifest.xml. Mine is test.
Step 1: Create an activity
Create a new activity which will be responsible for forwarding to main activity. In android/app/src/main/java/[packageName] create a SplashActvity.java file with the following code:
package com.[packageName]; // ← Make sure that is 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();
}
}Step 2:Modify AndroidManifest.xml to use SplashActivity
Replace the <application> with the following in AndroidManifest file.
<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"
android:windowSoftInputMode="adjustResize"
android:exported="true">
</activity>
<activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
</application>
</manifest>If the formatting is off, you can just copy paste it.
Step 3: Add a new style
The changes to the manifest style uses a new style which we will be defining now. In android/app/src/main/res/values/styles.xml and add the following lines of code.
<style name="SplashTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:background">@drawable/background_splash</item><item name="android:statusBarColor">@color/background</item>
</style><style name="SplashStatusBarTheme" parent="SplashScreen_SplashTheme">
<item name="android:statusBarColor">@color/background</item>
</style>
We again see that we have @drawable/background_splash and @color/background used which we will define next.
Step 4: Adding colors
You can change the color to the your liking. Add the following line of code:
<?xml version="1.0" encoding="utf-8"?><resources><color name="background">#282c33</color>
<color name="primary_dark">#000</color></resources>
Step 5: Creating Drawables
Now comes the hardest part of them all. First you need a drawable folder at android/src/main/res/drawable. If the folder doesn’t exist, create an empty one. Now you will need Android drawable importer to create the logo. You will need Android Studio for this. The newer versions of Android Studio doesn’t have this module. You can follow the guide and download the modules from the video here.
Next you will need to create a background_splash.xml file. Copy paste the code below:
[icon_name] is the name of the png that you create with Android drawble importer.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:drawable="@color/background" />
<item
android:drawable="@drawable/[icon_name]"
android:height="200dp"
android:width="200dp"
android:gravity="center"
/>
</layer-list>Step 6: Modify MainActivity.java
Add the following lines of code to the java file.
import org.devio.rn.splashscreen.SplashScreen;
import android.os.Bundle;...public class MainActivity extends ReactActivity {@Override
protected void onCreate(Bundle savedInstanceState) {
SplashScreen.show(this, R.style.SplashStatusBarTheme);
super.onCreate(savedInstanceState);...}
Step 7: Creating a layout for Splash Screen
We are almost done in the Android setup. The last thing we need to do is create layout folder in android/app/src/main/res. Inside the folder declare a file launch_screen.xml and copy paste the code below.
<?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"
/>Step 8: Disabling Splash Screen:
What we have done till now is create a splash screen where we will show our desired logo to our users. What we need to do next is disable the screen. We do this with the help of the package that we installed earlier. So moving to App.js file, we need to add these lines of code.
...
import SplashScreen from 'react-native-splash-screen';
...const App =()=>{
...
useEffect(()=>{
SplashScreen.hide();
},[]);
...
}
Try building your application now…
