UIKit View Controller loaded on SwiftUI-based project on canvas of XCode

Load UIKit View Controller on a SwiftUI-Based Project

with 3 easy steps!

Last Updated: August 20, 2024

Through exploration and experimentation, I discovered the power of UIViewControllerRepresentable. This protocol allows us to seamlessly wrap UIKit view controllers within SwiftUI views, bridging the gap between the two frameworks.

Step-by-step Pseudocode

1. Create a new Swift file called UIKitViewControllerWrapper.swift and implement the following functions:

• 1a: Create a UIViewControllerRepresentable protocol implementation that wraps the UIKit view controller.
• 1b: Implement the required methods makeUIViewController(context:) and updateUIViewController(_:context:).
• 1c: In the makeUIViewController(context:) method, instantiate and return the UIKit view controller.

2. In ContentView.swift file, use the UIViewControllerRepresentable implementation within a SwiftUI view.

3. Embed the SwiftUI view containing the UIKit view controller in the main app structure.

Swift Implementation

This code sets up a SwiftUI application that runs a UIKit view controller. It demonstrates how to bridge UIKit with SwiftUI using the UIViewControllerRepresentable protocol, allowing you to integrate any existing UIKit view controllers into a SwiftUI-based project.

You can find the complete code in the branch of the GitHub repository linked here:

GitHub - CongLeSolutionX/MyApp at Load_UIKit_View_Controller_on_a_SwiftUI-Based_Project

////  UIKitViewControllerWrapper.swift

import SwiftUI
import UIKit

// Step 1a: UIViewControllerRepresentable implementation
struct UIKitViewControllerWrapper: UIViewControllerRepresentable {
    typealias UIViewControllerType = MyUIKitViewController
    
    // Step 1b: Required methods implementation
    func makeUIViewController(context: Context) -> MyUIKitViewController {
        // Step 1c: Instantiate and return the UIKit view controller
        return MyUIKitViewController()
    }
    
    func updateUIViewController(_ uiViewController: MyUIKitViewController, context: Context) {
        // Update the view controller if needed
    }
}

// Example UIKit view controller
class MyUIKitViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .systemBlue
        // Additional setup
    }
}

////  ContentView.swift

// Step 2: Use in SwiftUI view
struct ContentView: View {
    var body: some View {
        UIKitViewControllerWrapper()
            .edgesIgnoringSafeArea(.all) /// Ignore safe area to extend the background color to the entire screen
    }
}

// Before iOS 17, use this syntax for preview UIKit view controller
struct CounterView_Previews: PreviewProvider {
    static var previews: some View {
        UIKitViewControllerWrapper()
    }
}

// After iOS 17, we can use this syntax for preview:
#Preview {
    ContentView()
}

//  MyApp.swift

// Step 3: Embed in main app structure
import SwiftUI

@main
struct MyApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

This guide is rooted in my practical experience as an iOS developer, where I’ve successfully integrated UIKit and SwiftUI into my projects. By sharing this solution, I aim to help fellow developers tackle similar challenges and explore new possibilities. I encourage you to experiment with the code, adapt it to your needs, and share your experiences.

This code snippet lays the groundwork for my other article exploring Auto Layout concepts like Content Hugging and Content Compression Resistance. It’s important to note that these concepts are part of the UIKit framework but not available in the SwiftUI framework.

You can read more about these concepts here.

Adaptive UI Layouts in Swift: Understanding Content Hugging and Compression Resistance

If you are interested in further exploring this topic, you can refer to the Apple documentation — Interfacing with UIKit for more detailed information.

As you embark on this journey, which view controller in UIKit are most interested in connecting to your SwiftUI project? Leave a comment down below!

Stay in the loop!

Subscribe to my email newsletter and I’ll notify you whenever I publish a new article.

➡️ [Click here to subscribe]

If you found this article helpful, would you mind showing your support by following me and clapping a few times? Or feel free to buy me a beer 🍺 🤪. It really helps! Thanks for reading!