This tutorial is the tenth chapter of our implementation of an AirBnB clone in React Native. In the previous chapter, we successfully implemented a persistent login state and logout with Firebase before adding a drawer navigator.

If you missed any of the previous tutorials, we recommend that you follow them first by going through the following links:

In this chapter, we’ll continue developing our AirBnB clone in React Native by adding a splash screen. A splash screen is a screen that displays an app’s logo upon opening and before continuing to the main screen. The task of adding a splash screen is rather simple, even though the process involves several steps. This chapter will only focus on adding a splash screen for an iOS app.

Let’s begin!

Airbnb splashscreen

If you pay attention to the original AirBnB splash screen, which you see in the short video above, you’ll notice the simple screen that shows only the AirBnB logo for a second or two before continuing to the main screen.

Download the AirBnB Logo

You can download the Airbnb logo here.

Design the Splash Screen in Xcode

Open our AirBnB clone project in Xcode and select the file airbnbclone.xcworkspace

Then select the folder Images.xcassets and click on the option “New Image Set”.

Name the new image set as “splash screen” and add the previously downloaded AirBnB logo to the image set.

Next, open the file named LunchScreen.xib.

Remove the default text from the file and choose the option to add a new image view.

Pick the previously created splash screen image set as the image source.

You can select the ruler icon on top of the sidebar to allow auto-resizing.

Now we have a fully-designed splash screen. That’s all it took!