How to use SwiftUI as UIViewController in Storyboard

⋅ 3 min read ⋅ SwiftUI UIKit Storyboard

Table of Contents

There are two ways to use SwiftUI view as a UIViewController in a UIKit project that uses a Storyboard.

  1. Use UIHostingController with IBSegueAction.
  2. Create a UIHostingController subclass.

In this article, I will cover the first approach.

UIHostingController with IBSegueAction

Integrate SwiftUI view using UIHostingController and IBSegueAction is suitable in a situation where you want to present a new view controller, e.g., push to navigation stack or present a modal.

To do that, we need to do the following four steps.

  1. Add a UIHostingController to the Storyboard.
  2. Create a Segue to UIHostingController.
  3. Create an @IBSegueAction.
  4. Implement the IBSegueAction.

As an example, I will try to push a SwiftUI view into a navigation stack when users tap a button.

Here is our initial setup, a simple navigation view with a button in the center.

An initial Storyboard.
An initial Storyboard.

Add a UIHostingController to the Storyboard

Open the Library either by

  • View Menu > Show Library.
  • ⇧ - shift + ⌘ - command + L
  • Or Clicking on the + button in the top right corner.
A button to open Xcode Library.
A button to open Xcode Library.

You will see a Library window popping up.

Xcode Library
Xcode Library

Then, search for "UIHostingController" and drag and drop it into the Storyboard.

Add a UIHostingController to the Storyboard
Add a UIHostingController to the Storyboard

Create a Segue to UIHostingController

This step is no different than what we normally do. We create a show (push) segue from the button to the UIHostingController.

Create a show segue.
Create a show segue.

To create an Action Segue, we do the following steps.

  1. Hold down the Control key.
  2. Click the button and drag it to the UIHostingController.
  3. Select "Show" Action Segue.
Create a segue between the button and the hosting view controller.
Create a segue between the button and the hosting view controller.

Create an @IBSegueAction

Storyboard use @IBSegueAction as a bridge between Storyboard and the code.

Since we want to customize this action to use the SwiftUI view, we need to create an @IBSegueAction.

Here are the steps to create @IBSegueAction.

  1. Open the Storyboard.
  2. Open "Assistant editor" from Editor Menu > Assistant. This will open the Storyboard and Code editor side-by-side.
  3. Select the "Show" Action Segue we created in the last section.
  4. Hold down the Control key and drag to the code editor.
  5. Enter the name of your segue. I named it showSwiftUIView.
Create an @IBSegueAction.
Create an @IBSegueAction.

Implement the IBSegueAction

In the @IBSegueAction, we return a view controller that will be used as a destination for this segue action.

This is where we create and return our SwiftUI view.

import UIKit
import SwiftUI

class ViewController: UIViewController {

override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
}

@IBSegueAction func showSwiftUIView(_ coder: NSCoder) -> UIViewController? {
return UIHostingController(coder: coder, rootView: SwiftUIView())
}
}

We need to use UIHostingController's initializer that accepts coder here, init(coder:rootView:).

When we tap the Next button, this is what we get.

Push to a SwiftUI view.
Push to a SwiftUI view.

Read more article about SwiftUI, UIKit, Storyboard, or see all available topic

Enjoy the read?

If you enjoy this article, you can subscribe to the weekly newsletter.
Every Friday, you'll get a quick recap of all articles and tips posted on this site. No strings attached. Unsubscribe anytime.

Feel free to follow me on Twitter and ask your questions related to this post. Thanks for reading and see you next time.

If you enjoy my writing, please check out my Patreon https://www.patreon.com/sarunw and become my supporter. Sharing the article is also greatly appreciated.

Become a patron Buy me a coffee Tweet Share
Previous
How to change Background color of Rounded Corner Border Button in SwiftUI

Having both background and border in SwiftUI isn't straightforward. Let's learn how to do it.

Next
How to pop view from Navigation stack in iOS 16

Let's learn how easy it is to pop or dismiss a view from a NavigationStack, a new navigation view in iOS 16.

← Home