Bridging the Gap: Integrating SwiftUI with UIKit Using UIHostingController

Posted on 09 Jul 2024 . 3 min read

Introduction

With the introduction of SwiftUI, Apple has provided developers with a modern way to build user interfaces across all Apple platforms. However, many apps are still built using UIKit, and a complete rewrite might not be feasible. This is where UIHostingController comes into play, acting as a bridge that allows you to integrate SwiftUI views into your existing UIKit apps seamlessly. In this blog post, we’ll explore how to use UIHostingController to marry the old with the new.

What is UIHostingController?

UIHostingController is a class provided by Apple that allows you to embed SwiftUI views within a UIKit-based application. This enables developers to gradually adopt SwiftUI in their existing projects or add SwiftUI views to specific parts of their UIKit apps.

Key Features of UIHostingController

Initialization: You can initialize UIHostingController with any SwiftUI view.
Integration with UIKit: Easily present or add the hosting controller to your view hierarchy.
Updating Views: Dynamically update the SwiftUI view being displayed.
Layout Management: Adhere to UIKit’s layout constraints seamlessly.

Step-by-Step Guide

1. Creating a Simple SwiftUI View

First, let’s create a simple SwiftUI view. This view will be embedded in our UIKit-based application.

import SwiftUI

struct ContentView: View {
    var body: some View {
        Text("Hello, SwiftUI!")
            .padding()
    }
}

2. Integrating SwiftUI View into UIKit

Now, we’ll integrate this SwiftUI view into a UIKit view controller using UIHostingController.

        
import SwiftUI
import UIKit

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()

        // Create a UIHostingController with the SwiftUI view
        let contentView = ContentView()
        let hostingController = UIHostingController(rootView: contentView)

        // Add the hosting controller as a child view controller
        addChild(hostingController)
        view.addSubview(hostingController.view)
        
        // Set up the constraints
        hostingController.view.translatesAutoresizingMaskIntoConstraints = false
        NSLayoutConstraint.activate([
            hostingController.view.topAnchor.constraint(equalTo: view.topAnchor),
            hostingController.view.bottomAnchor.constraint(equalTo: view.bottomAnchor),
            hostingController.view.leadingAnchor.constraint(equalTo: view.leadingAnchor),
            hostingController.view.trailingAnchor.constraint(equalTo: view.trailingAnchor)
        ])

        // Notify the hosting controller that it has been moved to a parent
        hostingController.didMove(toParent: self)
    }
}

3. Presenting SwiftUI View Modally

Another common scenario is presenting a SwiftUI view modally from a UIKit view controller.

let swiftUIView = ContentView()
let hostingController = UIHostingController(rootView: swiftUIView)
present(hostingController, animated: true, completion: nil)

4. Updating the SwiftUI View

You can also dynamically update the SwiftUI view displayed by the UIHostingController.

hostingController.rootView = AnotherSwiftUIView()

Benefits of Using UIHostingController

Gradual Adoption: Integrate SwiftUI incrementally without a complete rewrite.
Flexibility: Use the best of both SwiftUI and UIKit as per the needs of your project.
Modern UI: Leverage SwiftUI’s declarative syntax and powerful UI components in existing projects.

The bottom line

UIHostingController offers a powerful way to integrate SwiftUI views within UIKit applications, providing a flexible path for developers to adopt SwiftUI incrementally. Whether you are looking to modernize certain parts of your app or gradually transition to SwiftUI, UIHostingController is an invaluable tool. Start experimenting with it today and enjoy the best of both worlds!

Additional Resources

By understanding and utilizing UIHostingController, you can effectively bridge the gap between UIKit and SwiftUI, leveraging the strengths of both frameworks to create compelling, modern applications.

Don’t hesitate to contact me if you have any questions or queries. Follow me on twitter @gurjitpt for any updates.

Thanks!

Share this article

Written By

Generic placeholder image

Gurjit Singh

I’m Computer Science graduate and CompTIA Security+ certified SOC Analyst and Mobile Application Security Engineer with 10+ years of cross-platform development experience across iOS, Android, and web.

Discover articles by topics

SwiftUI Class Struct Networking XCode NSCache Enum Optionals Property Observers Closures Guard Reviews StoreKit App Store Algorithms Testing Operators Protocol Extensions Weak Unowned SwiftData WWDC23 GCD API Admob SwiftLint Lottie Foreach Objective-C UIKit NavigationSplitView