Krissanawat Kaewsanmuang

React native dev,Coffee addict

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

Published Feb 13, 2020

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

{% gist https://gist.github.com/krissnawat/740dc4b6a68659d9f759ba5788f0f795 %}

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.

{% gist https://gist.github.com/krissnawat/895097deb828599c2580b1fbc57a82d1 %}

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

{% gist https://gist.github.com/krissnawat/13638b1cb80c14fde200ccc28b0f35e5 %}

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.

{% gist https://gist.github.com/krissnawat/042f4d2f42278762f9956b35f709d86e %}

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:

{% gist https://gist.github.com/krissnawat/c44b246314c0c05fc1f2e18bf39ef449 %}

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:

{% gist https://gist.github.com/krissnawat/f89d8e335aeb08f21334a0115aa00c28 %}

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:

{% gist https://gist.github.com/krissnawat/598c1b30b8fdfd6ebc3fcd5e45880fa8 %}

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.

React native

Report

Enjoy this post? Give Krissanawat Kaewsanmuang a like if it's helpful.

Krissanawat Kaewsanmuang

React native dev,Coffee addict

Full Stack Web Developer love coding I am a freelance web developer working out of Thailamd . My weapons of choices are : HTML, CSS, Javascript, SQL, Ruby, Ruby on Rails. I literally spend as much hours as possible every day on ...

Discover and read more posts from Krissanawat Kaewsanmuang

get started