How to Make a Launch Screen in SwiftUI
Tags: swift, swiftui, ios
Published: 2021-05-08 21:12:57

---
title: How to Make a Launch Screen in SwiftUI
published: true
description: 
tags: #swift #swiftui #ios
//cover_image: https://direct_url_to_image.jpg
---
<!-- wp:paragraph -->
<p>In this post we are going to look at how we can implement a launch screen in our SwiftUI project. In the past we would usually have to use a storyboard or XIB file to make our launch screens. In SwiftUI, we can now use the <strong>Info.plist</strong> to make our launch screen. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Let us get started by first navigating to our <strong>Info.plist</strong> file and towards the bottom we should see a <strong>"Launch Screen"</strong> area in our plist. </p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center","id":1689,"width":437,"height":36,"sizeSlug":"large","linkDestination":"none"} -->
<div class="wp-block-image"><figure class="aligncenter size-large is-resized"><img src="https://swifttom.com/wp-content/uploads/2021/05/Screen-Shot-2021-05-06-at-7.02.08-PM.png" alt="" class="wp-image-1689" width="437" height="36"/></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>If we click the little plus button next to where it says <strong>"Dictionary"</strong> we should see a list of options popup. </p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center","id":1690,"sizeSlug":"large","linkDestination":"none"} -->
<div class="wp-block-image"><figure class="aligncenter size-large"><img src="https://swifttom.com/wp-content/uploads/2021/05/Screen-Shot-2021-05-06-at-7.05.44-PM.png" alt="" class="wp-image-1690"/></figure></div>
<!-- /wp:image -->

<!-- wp:list {"ordered":true} -->
<ol><li><strong>Background color:</strong> Here we can set the color of the launch screens background</li><li><strong>Image name:</strong> Here we can set an image to our launch screen at the images size / resolution</li><li><strong>Image respects safe area insets:</strong> This is a bool where we can allow the image to respect or exceed the safe area of the screen</li><li><strong>Show navigation bar:</strong> This is a bool where we can display a mock up of a Navigation bar</li><li><strong>Show Tab bar:</strong> This is a bool where we can display a mock up of a Tab bar </li><li><strong>Show Toolbar:</strong> This is a bool where we can display a mock up of a tool bar</li></ol>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>In this example we are only going to add an image to our launch screen. To do this we will click on the <strong>"Image Name"</strong> option. This will add an image name property to our plist with a blank string. We will leave this blank for now but we will soon fill it in with our image name.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Next we will need to add an image to our <strong>Assets.xcassets</strong> file. Once we have dragged and dropped an image into our <meta charset="utf-8"><strong>Assets.xcassets</strong> file, we will now copy the image name and paste it into the string area of<strong> "Launch Screen</strong>" "<strong>Image Name"</strong> back in our plist.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center","id":1696,"sizeSlug":"large","linkDestination":"none"} -->
<div class="wp-block-image"><figure class="aligncenter size-large"><img src="https://swifttom.com/wp-content/uploads/2021/05/Screen-Shot-2021-05-07-at-6.51.18-PM-1-1024x210.png" alt="" class="wp-image-1696"/></figure></div>
<!-- /wp:image -->

<!-- wp:image {"align":"center","id":1695,"sizeSlug":"large","linkDestination":"none"} -->
<div class="wp-block-image"><figure class="aligncenter size-large"><img src="https://swifttom.com/wp-content/uploads/2021/05/Screen-Shot-2021-05-07-at-6.51.59-PM-1.png" alt="" class="wp-image-1695"/></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>As you can see in the images above we added an image named <strong>"144"</strong> to our projects assets file. We then set that image in our <strong>Info.plist</strong> to be our launch screen image (<em>Don't ever name an image with a number</em> 🤢). Now if we go and run our app we should see a quick glimpse of our launch screen image before the app loads.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center","id":1698,"width":280,"height":606,"sizeSlug":"large","linkDestination":"none"} -->
<div class="wp-block-image"><figure class="aligncenter size-large is-resized"><img src="https://swifttom.com/wp-content/uploads/2021/05/Simulator-Screen-Shot-iPhone-12-Pro-2021-05-07-at-19.01.03-473x1024.png" alt="" class="wp-image-1698" width="280" height="606"/></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>That is all you need to make a launch screen in SwiftUI! This is just another example of how SwiftUI makes developers lives that much easier. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Hope this helps you on your next SwiftUI project! </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Thanks for reading and Happy coding <meta charset="utf-8">🚀📱 <meta charset="utf-8">🚀📱 </p>
<!-- /wp:paragraph -->