How to use SwiftUI as UIViewController in Storyboard

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.

You can easily support sarunw.com by checking out this sponsor.

Offline Transcription: Fast, privacy-focus way to transcribe audio, video, and podcast files. No data leaves your Mac.

Try it for Free

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.

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.

You will see a Library window popping up.

Then, search for "UIHostingController" and drag and drop it into 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.

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 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.

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.