Whilst we seem to have multiple tutorials available on the hackajob blog that detail how to develop a brand new app from scratch, we feel it’s important to take some additional time and learn what to do with an app after it’s been created; such as creating a launch screen and configuring launch icons.
Today, we’ll be showing you how to set these options in an iOS app. To start, create a new react native project:
react-native init launchConfigurations && cd launchConfigurations
For this tutorial, we thought it would be fun to use the hackajob logo as both a launch screen and an icon. Remember that to do this with any logo, you’ll need a good image, at least 1024 x 1024 pixels in size:
In this tutorial, we’ve decided to edit the Launch Screen directly from Xcode, so we suggest you do the same. Open your project in the iOS folder. As you’ll notice, there are two Xcode projects inside of the folder. The one you’ll be using has the ‘xcworkspace’ termination.
Here’s what your default launch screen should look like:
First things first, delete any and all text labels:
Next, create a new image set within ‘Images.xcassets’:
Call this image set ‘LaunchScreen’ and drag and drop your image in each space of the new set:
Open the ‘LaunchScreen’ file again and add an image ‘view’ to the screen:
It’s now time to select your image set (don’t forget to centre it!):
Finally, you’ll need to open the size comparator and uncheck the ‘autoresizing mask’ so that your image will always stay in the centre:
If you’ve followed the steps above correctly, here’s what your launch screen should look like:
Remember that whilst the launch screen goes through the motions very quickly and right now you can barely see the logo, when your app gets more screens and better general functionality, this initial splash screen will take longer to load.
Now we’re going to look at making some launch icons. If you’re a Mac OS user, we recommend that you download the Icon Set Creator. If not, you can access something called App Icon Generator and get them online. Note that App Icon Generator can help you to create Android icons too, but for this tutorial we’re going to focus specifically on iOS.
After downloading the icon generator of your choosing, open it and simply drag and drop your 1024 x 1024 image in it and click ‘go’:
* Please note that the image that you use as an icon cannot have an alpha layer because the app won’t bundle.
Inside the generated folder, you’ll have some images, each one with an indicator of its own size. Make sure to open the ‘Images.xcassets’ files on Xcode once again and select the ‘AppIcon’ image set:
As you can see, there’s an indicator (or the pixel size) inside each spot of each icon. Now, you’ll need to drag and drop from your ‘generate’ file. As an example, in the 80x80 spot you can use the 40@2x.png file:
Note that if a file doesn’t match with the required size, a warning signal will appear:
After every image is set, you can rebuild the app via the ‘react-native run-ios’ command:
Whilst it may seem like a painful process to build a launch screen and create accompanying launch icons, it’s so worth it in the long run and will give you a good, solid foundation for any app that you decide to build.
Enjoyed this article? Make sure to check out our other blog posts on all-things React Native.