fbpx

This is the eleventh chapter of our implementation of an Airbnb clone in React Native. This chapter will focus on adding a splash screen to our android Airbnb clone. If you missed any of the previous chapters of our implementation of the Airbnb clone, you can find the links to them here:

In this tutorial, we’ll learn how to add a splash screen to the Android version of our app. If you want to learn how to add a splash screen to an iOS app, refer to the previous chapter , in which we added a splash screen to the iOS version of our AirBnB clone.

To create a splash screen in Android, we first should add the required splash screen icons and then configure the native Android app directory. The react-native-splash-screen package we used in the previous chapter is used in this tutorial, as well.

Add the Splash Screen Icon

To add the icon files to the project, navigate to the directory /splash/android/app/src/main/res in the project folder, and copy the icon files to the respective directories inside ./res, as shown below:

Rename all the icon files as splash_icon.png in all the directories.

Now we need to create a new directory named “drawable” in the ./res/ directory. Inside the ./res/drawable directory, create a new Drawable Resource File named background_splash.xml. This background_splash screen will be where we draw the splash screen for the app. After this addition, the directory structure of the project will look like this:

In the above directory structure, we cannot see any preview in the preview section on the right side of the screenshot. To show the preview of the icon section in the preview section, use the following code snippet in the background_splash.xml file:

<?xml version="1.0" encoding="utf-8"?>
    <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
        <item
            android:drawable="@color/primary_dark"/>
        <item
            android:width="200dp"
            android:height="200dp"
            android:drawable="@mipmap/splas_icon"
            android:gravity="center" />
    </layer-list>

 

To define the colors we’ve uses in the above code, create a new Drawable Resource File named colors.xml inside the ./res/values directory and add the following code to this file.

<?xml version="1.0" encoding="utf-8"?>
    <resources>
        <color name="green">#ffffff</color>
        <color name="primary_dark">#ffffff</color>
    </resources>

 

Now copy the following code snippet into the ./values/styles.xml file to configure the styles for the native phase of the app:

<resources>
        <!-- Base application theme. -->
        <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
            <!-- Customize your theme here. -->
            <item name="android:statusBarColor">@color/green</item>
        </style>
        <style name="SplashTheme" parent="Theme.AppCompat.Light.NoActionBar">
            <item name="android:windowBackground">@drawable/background_splash</item>
            <item name="android:statusBarColor">@color/green</item>
        </style>
    </resources>

 


Configure the AndroidManifest.xml File

Open the AndroidManifest.xml file from the ./android/app/src/main directory. This file contains the MainActivity for the native Android part of the app. Add additional activity names SplashActivity with a SplashTheme theme and intent-filter prior to the MainActivity declaration.

<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:configChanges="keyboard|keyboardHidden|orientation|screenSize"
            android:windowSoftInputMode="adjustResize"
            android:label="@string/app_name"
            android:exported="true"
            />
      <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
    </application>

 

Create the SplashActivity Class

In order to create a new SplashActivity class, we need to create a new class file named SplashActivity.java in the ./app/java/airbnbclone folder:

package com.airbnbclone;
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();
    }
}

 

Resolve the White Screen Gap

Under the current configuration, our app shows a white screen in between the transition from the splash screen to the main app screen. To remove this behavior, we have to display the splash screen until the React Native part of the app starts running.

We can solve this problem by adding the react-native-splash-screen package. It provides a splash screen API for React Native that can programmatically hide and show the splash screen. The package works in both Android and iOS. All the configurations for the React Native part as well as the native part are provided in the documentation.

Run the following command to install the package:

>>> yarn add react-native-splash-screen  //using yarn
>>> react-native link react-native-splash-screen        

Running the Splash Screen in MainActivity

Open the MainActivity.java file from the .app/java/com.splash folder and copy the following code snippet:

package com.airbnbclone;
 import com.facebook.react.ReactActivity;
 import android.os.Bundle;
 import org.devio.rn.splashscreen.SplashScreen;
 public class MainActivity extends ReactActivity {
   @Override
   protected void onCreate(Bundle savedInstanceState) {
     SplashScreen.show(this);
     super.onCreate(savedInstanceState);
   }
   /**
    * Returns the name of the main component registered from JavaScript. This is used to schedule
    * rendering of the component.
    */
   @Override
   protected String getMainComponentName() {
     return "splash";
   }
 }

 

Here, we’ve imported the previously-installed SplashScreen package. The show() method of the SplashScreen package is used to show the splash screen until the React Native part of the app runs.

Now when we open the app, the SplashActivity that we created before will run first and display the splash screen. When the MainActivity starts running after the SplashActivity, it will also show the splash screen.

Configure the Layout of the Splash Screen for the MainActivity

We still have to configure the layout for the splash screen that runs during the MainActivity. Create a new layout folder inside the ./res directory and add a new Layout Resource File named launch_screen.xml. into the ./res/layout/ folder. This file has the splash screen template that will run during the white screen gap.

The code to draw the splash screen template is provided 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="@color/green"
     android:gravity="center">
       <ImageView
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_marginTop="24dp"
        android:src="@mipmap/splash_icon"
        />
    </LinearLayout>

 

This addition will now solve the white screen gap issue.

Now, if we re-run our project in the Android emulator, we’ll get the following result:

Now if we run the app in the emulator, the resulting app startup will look like this.

Summary

In this chapter, we learned how to set up a splash screen for the Android part of our React Native AirBnB clone app. We learned how to configure the React Native files as well as native Android files in order to add a splash screen.

We also learned how to overcome a white screen gap problem using the react-native-splash-screen package. in the next chapter, we’ll implement redux to handle state management.



Also published on Medium.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.