Creating a Simple Splash Screen for an iPad App
So this was annoyingly difficult to do. It didn't take that long really, but I did not find Xcode to be very intuitive, and I had a surprisingly hard time finding good resources on this.
Add a new Image Set
First off, you need to add a new "Image Set" to your app. To do this, click on "Images" in the sidebar, and then click the "+" icon and choose "Image Set" like this:
Then right click on the Image Set you just added and choose the "iPad" option in terms of Devices:
Also remove the Universal one so it looks like this:
We're going to be using this for your brand's logo, so create two PNGs of your logo (logo@1x.png and logo@2x.png in whateverer dimensions make sense based on how large you want your displayed logo to be). Then drag these PNGs into the slots so it looks like this:
Change the Background Color of the LaunchScreen View
Next we have to update the LaunchScreen View itself.
Click "LaunchSceen" in the sidebar, and then click on any items that are already there (the default items that ship with React Native) and delete them. This will leave you with an empty view:
Then click on the View itself and change the background color by clicking on the dials icon.
(Ignore the logo in the screenshots - I captured these screenshots after I had already added the logo image set to the View.)
Click on "Custom" at the very bottom of the "Background" dropdown, and navigate to the RGB Sliders in the ensuing color picker:
Add Your Splash Icon and Center It Using Constraints
Next, with the current View selected, click on the "+" icon in the upper right in Xcode, choose the image icon, and then drag the image set you created to the canvas:
It will look like this once the item has been added:
However, it will not be properly centered for both Landscape and Portrait views. To accomplish this, we need to add constraints by clicking on the "Align" icon with the image selected:
Check both boxes for centering and then add the two constraints. It will look like this when you're done:
And you can test it in Portrait view by clicking the screen orientation icon:
That's it. Rebuild your app, and you should see your updated splash screen.