Using SwiftUI along with UIKit

The UIKit framework was introduced by Apple in 2008 along with iPhone OS2. More than 10 years later, in 2019, Apple introduced SwiftUI with the intent of saving developers time.

So, SwiftUI vs. UIKit — is one better than the other? Well, despite its many advantages, companies have been slow to adopt the use of SwiftUI in their iOS apps. Some organizations are willing to try SwiftUI for a new project, but many are hesitant to migrate existing UIKit projects to this framework.

SwiftUI requires iOS 13 or later, so it’s not compatible with apps developed using an older iOS version. Also, transferring large apps to a different framework is time consuming and could hamper developer bandwidth.

This tutorial will demonstrate how to add a SwiftUI screen to a UIKit project. This SwiftUI UIKit integration solution can provide the experience of using SwiftUI without creating a new app from scratch. Adding SwiftUI to an existing UIKit project will also make it easier for us to migrate the app to SwiftUI in the future.

We’ll create a SwiftUI screen within a UIKit app, and then add functionality to allow navigation between the SwiftUI screen and the UIKit screen.

Creating the iOS project with Storyboard interface

So, we are first going to create a UIKit Project in Xcode:

1. We will select the Single App from the iOS Tab
2. Start Creating The Project

Name your Project whatever you want to name it

3. After Creating the project, we have these UIKit components such as AppDelegate, StoryBoards, ViewControllers, etc.

UIKit Project

4. Now for now, we will just add a button and a Label from the Storyboard to perform navigation between Swift StoryBoard and SwiftUI Screen.

5. So, add a label and a button in the View Controller from the storyboard and give them the constraints. Also, embed a Navigation Controller, so it will be easy to push SwiftUI Screen.

ViewController and StoryBoard

Creating the SwiftUI screen

Now, let’s create a SwiftUI Screen. Now here, for the learning purpose, I have taken a Login Screen which is made using SwiftUI.

1. Create a new file in SwiftUI. Select iOS for the platform and SwiftUI View for the user interface:

2. Next, give the file a name, and click Create:

3. Now, you should see the default SwiftUI View file with text “Hello, World!”

4. Now add whatever you want to add here in the SwiftUI Screen.

5. I am not showing the steps to code in SwiftUI (That can be a separate tutorial)

6. Now we have our SwiftUI Screen here like this:

Displaying the SwiftUI screen from StoryBoard

We need a way to push our SwiftUI screen. Right now, our application opens with the UIKit screen but doesn’t navigate to the SwiftUI screen.

To set up the functionality to navigate between the UIKit screen and the SwiftUI screen, we’ll use the UIKit’s UIHostingController class. The UIHostingController is a UIKit view controller that manages a SwiftUI view hierarchy.

To create UIHostingController, ensure that you import SwiftUI at the top of the code module.

Now, let’s open the ViewController.swift file and create a function to navigate to the SwiftUI screen:

@IBAction func navigateBtnTapped(_ sender: UIButton) {
   let swiftUIViewController = UIHostingController(rootView: LoginView())
   self.navigationController?.pushViewController(swiftUIViewController, animated: true)
}

Inside this function, we create a UIHostingController by passing our SwiftUI screen as a root view and also passing the main navigation controller to that. UIHostingController is a UIKit view controller and we push that view controller to our navigation controller.

Now, we can navigate from the UIKit screen to SwiftUI Screen.

Adding SwiftUI as a child view controller in View Controller

If you want to add a SwiftUI as a child view controller in the View Controller class, then you can also do that.

1. Create the UIHostingController just like we did it earlier.
2. Since UIHostingController itself is not a view, we can’t just add the whole thing to the view sub stack.
3. Add your hosting controller as a child to the view controller directly.
4. If you compile it, it still won’t work because there is no frame or constraints on the view.
5. Add constraints (or a frame) to the HostingController view.

// To add the SwiftUI View as a Child View in the ViewController
    func addSwiftUIViewToViewController() {
        let swiftUIViewController = UIHostingController(rootView: LoginView())
        self.addChild(swiftUIViewController)
        swiftUIViewController.view.translatesAutoresizingMaskIntoConstraints = false
        self.view.addSubview(swiftUIViewController.view)
        swiftUIViewController.didMove(toParent: self)
        NSLayoutConstraint.activate([
            swiftUIViewController.view.widthAnchor.constraint(equalTo: view.widthAnchor, multiplier: 1),
            swiftUIViewController.view.heightAnchor.constraint(equalTo: view.heightAnchor, multiplier: 1),
            swiftUIViewController.view.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            swiftUIViewController.view.centerYAnchor.constraint(equalTo: view.centerYAnchor)
        ])
    }

Inside this function, we are just giving the frame to the HostingController and then we are adding it to the View Controller class. Just call this function and you have successfully added the SwiftUI as a child content in your view controller.

Hope this blog helped you, have a nice day!!!