Guest Post: The Fix to stretched launch Images in SwiftUI

This is guest post. Thanks Daniel for welcoming me into your blog.

I recently came across Daniel’s post on how to define the launch screen of iOS apps by leveraging the new SwiftUI app lifecycle. Just a couple of fields in the Info.plist and a color assets plus an image and you are good to go. I was immediately sold on the approach. Simple and elegant.

I applied it to a project I’ve been working on and all was good initially, but then, at some point, with no related code changes, the image would appear stretched. I thought it was a quirk of the iOS simulator and didn’t give it much thought.

Then when it was time to ship my build to the client, I tested on device, and surely enough the splash screen was fine. Then I did a couple changes in unrelated parts of the code and, to my astonishment, the launch image appeared stretched even on real device!

I read through the comments on Daniel’s post and found that other readers were having the same problem, with no clear solution in sight. I played with several small changes here and there and thought I had found a solution: copying the SVG file of the launch screen image as 1x, 2x and 3x asset made the problem go away.

However, a few more changes and the problem reappeared. At this point, it seemed clear to me that launch screen support is flaky in the current version of SwiftUI (as of Xcode 12.4), so I needed some more reliable method to ship my build with some peace of mind, not leaving it to chance whether the client would see the correct launch screen or not.

What do you mean by “stretched”?

I have created an example for you to see what I mean.

This is the original launch image for a concept app for scheduling team meetings (please, bear with my rudimentary design skills, it’s just for demo purposes ?).

And this is how it would appear when stretched ?

Storyboards to the rescue

It feels kind of a defeat, but this seemed like a case for bringing back the launch screen storyboard. Sometimes we must fall back to UIKit when SwiftUI falls short and this seems to be one such case.

I had never created a launch screen storyboard from scratch, since I have always inherited it from the initial project template when creating an app based on UIKit and storyboards, but it is quite straightforward as you will see.

In the New File template, choose “Launch Screen”, under User Interface. Here it is important not to pick “Storyboard”. I did that initially and the screen couldn’t be connected, with no error message. I found out by trial and error, that the launch screen storyboard has some special attributes. These are automatically set for you when you choose the “Launch Screen” template, so be sure to select it instead.

The template appears with a reasonable value, with a label with the app’s name.

However, we can easily recreate what we had by choosing the view’s background color and adding a UIImageView with the correct image loaded. Don’t forget your Auto Layout constraints to center vertically and horizontally!

The next step is to choose this newly created storyboard as “Launch Screen File” in the project settings. This will create a new enty in the Info.plist file.

Lastly, we can remove (for now) the original launch screen entry in the Info.plist, which contained the SwiftUI properties.

Pro-tip: make all these changes in a single commit and you can revert it cleanly once the bug is fixed!

Thanks for reading, please, let me know if it helps you in the comments or reach to via Twitter.