Check out a free preview of the full Intermediate React Native course

The "iOS Splash Screen" Lesson is part of the full, Intermediate React Native course featured in this preview video. Here's what you'd learn in this lesson:

Kadi walks though creating a splash screen in Xcode to show users while the application is being loaded for the iOS version of the application. Setting a custom background color, manually hiding the splash screen with


Transcript from the "iOS Splash Screen" Lesson

>> All right, let's move on to splash screens. So a splash screen is basically the screen that we show to users while the app is getting loaded. So this can either be a full page image or an image with a background. So on Xcode Let's open Xcode and then go to launch screen.

Okay, so this is our current launch screen. And you can see on the left the tree view of what we're rendering. So all we want is we want to render an image at the center with just a blue background. So if we go to our images, where we had our app icon and then hit on the plus to create a new image sets.

You'll see that this creates an image set and it's expecting three images from us. So similarly to when we added images with our app. So let's just call this splash. And let's use the same butterflies from before, so I need to download each of them. So save, save and oops, go we have this one.

The save these in my downloads directory and open under studio. Open this flash image. Open my downloads and, then just drag and drop the correct file 2x goes to 2x, 3x goes to 3x. Now in our launch screen. We get rid of this text and we tracker and powered by react native.

And instead we hit on the plus. And then we search for image. And we drag the image view in a central application. And here on the right we can choose which image you want so here our splash image is showing up So now we want to make sure that our image is right in the center so we can make this a bit bigger who wanted to.

There we go and then make sure the lines will guide you to make sure that it's right in the center of your screen. This works for me, and now we go to this little triangle. And this basically helps us ensure that the image will be centered regardless of the screen size.

So here, these little lines tell you how it positions the image. So right now, I think it's using these sites to make sure that these sites work on every device. So instead, so click on these to make sure that you instead have this cross enabled. So this basically ensures that, this will be in the same position regardless of device size but always be centered.

So if we go to the View menu which is this little bars and then we go to the background. So and then go to custom so, this is a bit of frustration because I can't find a way to actually enter a xcode. So, what I usually do is I use the color picker, so here for example we can see the color available on our device actually.

Open this here can use the picker and pick the right color, Cool, so now that this is done for me to do is hit play to build it,

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now