React Native iOS Splash Screen Using Xcode Launch Screen

Photo by frank mckenna on Unsplash

JavaScript developer here living in mobile development world with React Native. I’ve worked on many React Native projects (almost in production and play), and in every one of them I’ve had to get down and dirty in the platform-specific code. Not actually too dirty, just a little bit of dust. Since I end up working even a little in native code, I always start my projects with react-native init AwesomeProject instead of create-react-native-app AwesomeProject. If you are using create-react-native-app, you won’t be able to use the following information unless you decide to ‘eject’ your React Native app. More on that here.

Why would you build your splash screen in Xcode and not use their Asset Catalog? There are some reasons. Maybe you don’t want to deal with exporting all those screen size images, and then have a new device come out forcing you to redo/add new sizes for the next release. Maybe you want to add some kind of special effect using native code. I learned this because I had planned to create an animation and wanted to get my feet wet in iOS views. The animation actually got changed to no animation, but I learned this nonetheless and now I‘m more familiar with Xcode, so a win for me.

Having said all that, if you want to go the asset catalog route, totally cool. Spencer Carli (amazing React Native blogger) wrote a great article about adding splash screens using the asset catalog in iOS (and he includes instructions for Android — bonus).

What We’re Starting With

When you first start a project in React Native, you’ll get this lovely splash screen to greet you on your first run.

Default splash screen after starting React Native project using react-native init

Good news about this is, they’ve already set up LaunchScreen.xib for us, which is what we’ll use for our very own branded splash screen.

Where We’re Going

Here is where we’re going (the circle and letters being whatever logo image you are planning to show).

Super awesome RNPlayground logo I whipped up in 30 seconds

View screen in Xcode

Let’s take a look in Xcode at what we have. Open the sub directories from your main project directory on the left, and then the top one is usually named the same as your project name. Open that one as well, and click on LaunchScreen.xib. This will open up something that looks like this on the right.

The first thing I notice is this is a square, and doesn’t look like any of the devices I’m developing for. I like to change the view so I can check everything out in various devices.

Make sure you have View in the left bar highlighted. On the right side bar, click the little icon button at the very top, fourth from the left (when you hover, it’ll say “Show the Attributes Inspector”). Change the first dropdown from ‘Freeform’ to ‘Page Sheet’. I am also going to set my background color here, by clicking the dropdown next to ‘Background’ and selecting my color. Here’s a visual — left is where we started, right is where you should be now (with whatever background color you choose).

Cool! Now we can view our splash screen on the various devices by clicking on any of them on the bottom bar.

Bottom bar in Xcode to switch view

Remove React Native Text

React Native’s default splash screen just uses text, so let’s get rid of that. Just click on each item beneath View in the left bar that has a text character on it (it’s L from what I’ve seen), and use the delete key on your keyboard.

So now we are left with a blank screen with our chosen background color. Let’s add our logo.

Add Image View to LaunchScreen.xib

With View selected in the left bar, go to the bottom of the right bar where you’ll see this little square of actions, and click on the third icon from the left (circle with square in the center).

Scroll down until you see the Image View option. Click, drag and drop this onto the screen.

Sorry for the low quality gif, but it gets the point across

Add Image File to Xcode

Great, now we need to add our image. If you go back to your project directory and click on Images.xcassets you may see something like AppIcon to the right of the directory list. We’re going to add our image to this directory. At the bottom of this pane there is a little ‘+’ button. Click that and select Import.... It’ll open a dialog box for you to find and select the image you’d like to use.

Now beneath AppIcon you’ll see your image file name. This is the name we’ll use to reference in our LaunchScreen.xib. So make sure you have the name copied exactly as it is here.

Reference Your Image for Use in LaunchScreen.xib

Now, we’ll go back to our LaunchScreen.xib file and select the Image View in the left pane. Switch your eyes over to the right pane, where you have the fourth from the left icon selected and you see the first dropdown that says Image. Click in there and type your image name exactly as you saved it (from above). You won’t include the extension (.jpg, .png). When you first add it, the image will likely be distorted some. That’s ok, we’ll fix it. Here’s where I am so far.

To fix that aspect ratio, move down to the View section in the right pane, select Content Mode dropdown, and choose Aspect Fit. Yay, much better!

I want mine directly in the middle, so I will grab it and drag down until the cross bars show me I’m centered. Looking good! But we have a problem. When I switch to an iPad view…

Wah.

Fix Aspect Ratio

Go to the right pane icon selections again, and click the next one to the right (looks like a vertical ruler). Go to the Autoresizing section and you can click the little red lines with arrows on the side to get the correct location of your logo. Play around to get what you want, or if you want the exact same logo in the center on every device, deselect the ones highlighted, and then make sure just the two in the smaller center box are highlighted, like below.

Now if we look back at the iPad and other screen sizes…

Yay! Looking good all around. So now you have a launch screen using the LaunchScreen.xib file. So you don’t have to change the source of your launch screen. You can go ahead and repackage and re-run your React Native app, and see your new beautiful splash screen in all it’s glory for like a second.


Hopefully this was helpful in some way to you — thanks for reading!

If you enjoyed, please feel free to appreciate with claps. :)

And comment below with any tips, feedback or general thoughts. I’m always open to learning new things and hearing others’ advice (whether I take it or not ;-) ). ❤