How to use SwiftUI in Storyboard using UIHostingController subclass

⋅ 3 min read ⋅ SwiftUI UIKit Storyboard

Table of Contents

There are two ways to use SwiftUI as UIViewController in Storyboard for a UIKit project.

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

We already cover the first approach in How to use SwiftUI as UIViewController in Storyboard. In this article, we will cover the second one.

Why do we need to subclass UIHostingController

Using SwiftUI view with UIHostingController with IBSegueAction is working when you have a segue action that presents a UIHostingController, e.g., push to navigation stack or present a modal.

But there are some situations where that is not possible, such as

  • Using UIHostingController as an Initial view controller.
  • Using UIHostingController as a Root view of a navigation controller.
  • Using UIHostingController as one of the View controllers in a Tab bar controller.

In these situations, you need to create a custom UIHostingController subclass.

Initial view controller
Initial view controller

How to create a custom UIHostingController subclass

It requires three steps to create a custom UIHostingController subclass.

  1. Create a UIHostingController subclass.
  2. Specify a SwiftUI view as a content view of the UIHostingController subclass.
  3. Use a custom class in the Storyboard.

Create a UIHostingController subclass

These are normal steps you normally do to create any subclass.

  1. Create a new "Cocoa Touch Class".
Create a new file.
Create a new file.
  1. Make it a subclass of UIHostingController and name it whatever you want.
Create a subclass of UIHostingController.
Create a subclass of UIHostingController.

Specify a SwiftUI view as a content view of the UIHostingController subclass

You need to do two things to make the new UIHostingController present a SwiftUI view.

  1. Set a hosting controller's generic content type to the SwiftUI view you want to present.
  2. Implement the init(coder:) initializer to return the specified SwiftUI view.
import UIKit
import SwiftUI

class SwiftUIViewController: UIHostingController<SwiftUIView> {

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder, rootView: SwiftUIView())
    }
}
  1. We specify our SwiftUI view as a hosting controller's content type, UIHostingController<SwiftUIView>.
class UIHostingController<Content> : UIViewController where Content : View { }
  1. We return the specified view from init?(coder aDecoder: NSCoder).
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder, rootView: SwiftUIView())
}

Use a custom class in the Storyboard

The last step is to use the newly created subclass in the Storyboard.

  1. Open the Storyboard and select the UIHostingController.
  2. In the Identity Inspector, put a subclass name in the Class field. In this case, SwiftUIViewController.
Set a custom class.
Set a custom class.

Here is the result.

Using a SwiftUI view as an initial view controller.
Using a SwiftUI view as an initial view controller.

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

Next
Custom Back button Action in SwiftUI

Learn how to have custom logic for a navigation view back button.

← Home