React Native iOS Splash Screen Using Xcode Launch Screen
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.
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).
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.
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
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.
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.
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…
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 ;-) ). ❤