xCode Launch Screen Storyboard Tutorial with Images for React Native
Everything looks great when setting up the Launch Screen in xCode, until, of course, you run it on an actual device.
The tutorials you may find online teach you in xCode, and they look great, but then they don’t work on real devices!
You test your work only to find a logo doesn’t show up at all, or a background doesn’t cover the status bar or safe area view.
That is why I had to write this tutorial, really, to my future self, to make it EASY to setup an xCode Launch Screen using the story board that works in production the same way it does in xCode.
Caveat: this tutorial is starting from a React Native build, which already has an Images.xcassets folder and LaunchScreen.storyboard file.
What I am trying to do is fill the entire background of the launch screen using one image, then put a logo image a little bit above the middle on top of the background.
I will be using my Math Stars app as an example, since that is what I was building when I ran into this issue.
The current version of xCode I am using is 12.2, though, if you understand everything here you can probably adjust the instructions for any small changes in future or past versions of xCode.
The first thing to do is add your background and logo images to the Images.xcassets folder, then follow these next steps…
1. Clear xCode Build Cache
Go to Product -> Clean Build Folder. Whether you are just getting started or repeating these steps because you messed up and want to start over, you always need to run this option first or else you may face bugs and think you did something wrong when you didn’t and it may drive you crazy and waste hours of your time searching for answers.
2. Delete all the views from the default Launch Screen.
In your main app folder in xCode click on LaunchScreen.storyboard. If it doesn’t exists, create it. Once there, delete all the views it has automatically created for you so you are working with a blank canvas.
3. Add an Image View and snap it into the center of the screen.
Go to ‘View->Show Library’ and choose the Image View and drag it to the middle of the screen until it snaps perfectly in the center. This Image View will serve as the background image and it will fill the entire screen, including the area past the safe area view. Next, follow these steps to position the background perfectly…
A. Click ‘Add New Constraints’ and make all four of the Top-Right-Bottom-Left numbers 0 and add the constraints.
This will create a new Constraints folder. Open it.
Most tutorials get you here, but getting it to fill the Safe Area view is the tricky part. Most tutorials leave out this part because for some reason, in xCode your background image fills the entire screen and it looks like it is setup correctly, but on a real device it will NOT be covering the Safe Area View!
So…
B. For each item in the constraints folder, click on it, then go to the right menu and make the First Item ‘Superview’ NOT ‘Safe Area’.
For 2 of the 4 constraints that will be the option, the other 2 you will do the same thing but instead of changing First Item, change Second Item. This is not tricky because there will only be a ‘Superview’ option in First or Second Item. Whichever one has that option, choose it. This allows us to make the background the full size of the screen, ignoring the Safe Area View.
Another gotcha is that most people would have added an image immediately and then added the constraints. The problem with this is you may accidentally be adding the constraints to the image instead of the container. That is why we add the constraints to the container first.
C. Choose an image file name from the top right menu while still clicked on the background Image View.
This is an image you would have previously added to the Images.xcassets folder.
D. Still in the right menu, under the section ‘View’, in the Content Mode dropdown, choose Aspect Fill.
Now you will have a background image that fills the entire launch screen on all devices! If you just want a color background, simply choose a background color instead of adding an image for this view.
4. Add a new Image View and snap it into the center of the screen.
This image view container will be used for the logo. Before adding a photo (your logo) to the container you want to get the view container properly positioned.
A. Click the ‘Align’ button and center both horizontally and vertically. Then, add -80 and add the new constraints.
Depending on your logo you may increase or decrease -80 to get it that distance from the vertical center. After originally adding the distance constraints, if you want to change the value DON’T ADD NEW CONSTRAINTS. Instead, find the constraint we just added in the Constraints folder, click on it and its constraints will be in the right menu. From there you can edit the distance.
B. Click the ‘Add New Constraints’ button and make the height 240 and check the Aspect Ratio checkbox.
Again, after you add a height constraint you can change the height to whatever you’d like, just make sure you are changing the values from the right menu after choosing the constraint from your folder, not by adding new constraints or you will introduce many buggy issues that may drive you nuts. You probably can set height and width and make this the exact size of your logo, in which case just don’t click Aspect Ratio.
C. Change the image file to the logo file you previously added to the Images.xcassets folder.
Make sure ‘Aspect Fit’ is chosen from the right hand View menu, though I think you can make it ‘Center’ or something else that is more appropriate for the logo you are using.
That’s it!
But wait, we can do better…
5. Get rid of the status bar on the Launch Screen
If you want to get rid of the Status Bar when loading the device, go to info.plist and check and see if ‘Status bar is initially hidden’ property is there and if it is set it to ‘YES’ or true. If it is not there, click the plus symbol in the ‘Information Property List’ row, look for ‘Status bar is initially hidden’ in the dropdown, add it and make the boolean ‘YES’.
6. Get rid of the white flash on transition from the launch screen to the app’s home screen using SplashScreen.
There are many solutions that may seem easier I found online, but none of them worked for me other than the one in this tutorial, it is very easy to implement and 100% necessary. Simply install the plugin, Splash Screen, and add a couple lines of code to the AppDelegate.m file. Don’t try and figure this out on your own, it’s a waste of time, just follow the tutorial and you will love the ease of the fix.
Tip: to use SplashScreen properly be sure to add SplashScreen.hide() in useEffect of your initial page that loads, maybe even setTimeout to 200 or 500 to be sure — however, I like to put it after I load the first item, for instance, if you are getting something from Async, or a making a network call, put SplashScreen.hide() in the .then(), this guarantees no white flash by giving the app more time to load its initial content before the transition from launch screen to home screen.
As for the SplashScreen plugin from the tutorial, be sure to follow the tutorial, NOT the git repo for SplashScreen which has outdated and wrong info and will crash the app.
7. Android Launch Screen setup and white flash avoidance.
For Android, I have only figured out how to add a logo and background color properly. To do so, first create the launch screen and bring it over to Ape Tools which will use your image to create all the files and folders needed for you. Then add/copy/paste all the images and folders it created to android/src/main/res/
Then, follow the instructions in the Android portion of the tutorial above. This will allow you to setup the launch screen AND the splash screen to avoid the white flash in Android.
Again, I found many tutorials online about setting up the Android launch screen and none were as easy and worked better. The only thing from the tutorial that didn’t work for me was including the v7 line in React Native > .60, I had to actually use the version < .60 even though I am using > .60. You’ll see when you get to it.
