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 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
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:
Configure the AndroidManifest.xml File
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
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
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
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.
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.
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.