AirBnB Clone with React Native Part 11: Implement a splash screen [Android]

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:

• AirBnB Clone with React Native Part 1: Home Screen UI
• AirBnB Clone with React Native Part 2: Login Screen UI
• AirBnB Clone with React Native Part 3: Email Authentication with Firebase
• AirBnB Clone with React Native Part 4: Login error notifications
• AirBnB Clone with React Native Part 5: Loading Modal Implementation
• AirBnB Clone with React Native Part 6: Animated Checkmarks
• AirBnB Clone with React Native Part 7: “Forgot Password?” with Firebase
• AirBnB Clone with React Native Part 8: Firebase Facebook Login (iOS)
• AirBnB Clone with React Native Part 9: Persistent login, drawer navigation, and logout
• AirBnB Clone with React Native Part 10: Implementing a splash screen [iOS]

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 theprevious 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:

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.

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

Looking for new ways to elevate your mobile app’s user experience? With Fritz AI, you can teach your apps to see, hear, sense, and think. Learn how and start building with a free account.

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.

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:

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:

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:

This addition will now solve the white screen gap issue.

The next revolution in mobile development? Machine learning. Don’t miss out on the latest from this emerging intersection. Sign up for weekly updates from our crew of mobile devs and machine learners.

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.

Editor’s Note:Heartbeat is a contributor-driven online publication and community dedicated to exploring the emerging intersection of mobile app development and machine learning. We’re committed to supporting and inspiring developers and engineers from all walks of life.

Editorially independent, Heartbeat is sponsored and published byFritz AI, the machine learning platform that helps developers teach devices to see, hear, sense, and think. We pay our contributors, and we don’t sell ads.

If you’d like to contribute, head on over to ourcall for contributors. You can also sign up to receive our weekly newsletters (Deep Learning Weekly andHeartbeat), join us onSlack, and follow Fritz AI onTwitter for all the latest in mobile machine learning.

---