Convert UIViewControllers to SwiftUI using UIViewControllerRepresentable

Okay Apple we get it SwiftUI is easy, fast and all, but how can I rewrite my whole app in SwiftUI? Well, you don’t need to do so. Yes, you can convert UIViewControllers to SwiftUI using UIViewControllerRepresentable. This way you don’t have to rewrite all your complex UIKit Code in SwiftUI!

Let’s create a UIViewController subclass named ViewController:

class ViewController: UIViewController {

    let label:UILabel = {
        let label = UILabel()
        label.text = "Hello World"
        label.font = UIFont.boldSystemFont(ofSize: 40)
        label.textColor = .systemBlue
        label.contentMode = .center
        label.textAlignment = .center
        label.translatesAutoresizingMaskIntoConstraints = false
        return label
    }()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        self.view.addSubview(label)
        
        NSLayoutConstraint.activate([
            label.centerXAnchor.constraint(equalTo: self.view.centerXAnchor),
            label.centerYAnchor.constraint(equalTo: self.view.centerYAnchor)
        ])
        
    }
    
}

Here we have a simple ViewController with a UILabel in the center.

Now, to use this ViewController with SwiftUI, we need to call our friend UIViewControllerRepresentable!

UIViewControllerRepresentable here, wraps and manages UIViewController, working as a middleware.

Let’s create our SwiftUIViewController which conforms to UIViewControllerRepresentable:

struct SwiftUIViewController: UIViewControllerRepresentable {
    
    func makeUIViewController(context: Context) -> ViewController {
        return ViewController()
    }
    
    func updateUIViewController(_ uiViewController: ViewController, context: Context) {
        
    }
    
}

Here, we need to implement delegate methods of the protocol UIViewControllerRepresentable:

makeUIViewController(context: Self.Context) -> Self.ViewControllerType

In this method, you create the instance of your UIViewController and configure the inital state.

We create instance of ViewController here, and since our ViewController does not need any initialisation right now, we just return it directly.

updateUIViewController(_ uiViewController: Self.ViewControllerType, context: Self.Context)

This method is called whenever the state of SwiftUI changes, giving us the opportunity to change our ViewController according to the state of the Application.

Since we do not have any state dependant UI in our ViewController currently, we leave this method empty. We will learn how to utilise this method in our next Tutorial.

Now, we have our ViewController and SwiftUIViewController, Let’s create a SwiftUI view:

struct SwiftUIView: View {
    var body: some View {
        SwiftUIViewController()
    }
}

SwiftUIView is a simple SwiftUI view which will just show our SwiftUIViewController in it. Hence the body only contains SwiftUIViewController. We can add other SwiftUI components here if want.

The preview of the SwiftUIView would show the following output:

Great how it all worked out so easily! That’s all you need to know! Now convert your UIViewControllers to SwiftUI using UIViewControllerRepresentable and reuse your code!

Read more about UIViewControllerRepresentable and these delegate methods on Apple Documentation.

If you want to learn how to use SwiftUI in your existing app, then you can read it here!

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

Checkout this amazing framework to create programmatic views faster: PrettyConstraints.