Use SwiftUI in your UIViewController using UIHostingController

SwiftUI is easy, and more swifty! So why not use it in your existing app? Learn how to use SwiftUI in your UIViewController in your existing app using UIHostingController. You can use SwiftUI with UIKit very easily with the help of UIHostingController.

Here’s an example of how to add SwiftUI to your app:

First of all, Let’s create a SwiftUIView:

struct SwiftUIView: View {

    var body: some View {
        VStack {
            Text("Hello World")
        }
    }

}

Since UIKit does not speak SwiftUI, let’s introduce a mediator here, UIHostingController!

UIHostingController creates a bridge between UIKit and SwiftUI framework. It works as a Container View for SwiftUI view, meaning you can use it as normal UIViewController.

Let’s understand this with an example:

First, create a UIViewController subclass named SwiftUIViewController:

class SwiftUIViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        
        // 1.
        let swiftUIView = SwiftUIView()
        
        // 2.
        let hostingController = UIHostingController.init(rootView: swiftUIView)
        
        // 3.
        self.addChild(hostingController)
        
        // 4.
        hostingController.didMove(toParent: self)
        
        // 5.
        self.view.addSubview(hostingController.view)
        
        // 6.
        hostingController.view.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            hostingController.view.topAnchor.constraint(equalTo: self.view.topAnchor),
            hostingController.view.leadingAnchor.constraint(equalTo: self.view.leadingAnchor),
            hostingController.view.trailingAnchor.constraint(equalTo: self.view.trailingAnchor),
            hostingController.view.bottomAnchor.constraint(equalTo: self.view.bottomAnchor),
        ])
        
    }
    
}

Let’s go step by step through the code:

1. Here, we used our previously created SwiftUIView in a SwiftUIViewController

2. To use the SwiftUIView in our SwiftUIViewController, We created UIHostingController for our SwiftUIView

3. Now, Let’s add UIHostingController as a child to our UIViewController

4. To explain why we did this, Let me quote Apple Documentation:

If you are implementing your own container view controller, it must call the didMove(toParent:) method of the child view controller after the transition to the new controller is complete or, if there is no transition, immediately after calling the addChild(_:) method.

5. Let’s add UIHostingController‘s view to the UIViewController‘s view

6. Finally, setup constraints for UIHostingController‘s view.

Note: We can also assign value to the frame of UIHostingController‘s view. However using constraints is more advisable.

Example Output:

That’s all on how to Use SwiftUI in your UIViewController using UIHostingController.

Read more about UIHostingController on Apple Documentation.

If you want to learn how to convert your existing UIViewControllers to SwiftUI, then read it here!

Let us know how you used SwiftUI in UIViewController in your app in the comments!