How to Use UIViewControllerRepresentable in SwiftUI

SwiftUI provides many built-in user interface components that can be used to build beautiful and responsive apps. However, there are times when you may need to use a UIKit view or view controller in your SwiftUI app.

Fortunately, SwiftUI provides a way to embed UIKit views and view controllers in a SwiftUI app using the UIViewControllerRepresentable protocol. In this post, we'll learn how to use UIViewControllerRepresentable to embed a simple UIKit view in a SwiftUI app.

Embedding a Simple UIKit View in SwiftUI

Let's start by creating a simple UIKit view that we will embed in our SwiftUI app. For this example, we'll create a UISlider that the user can slide left and right to adjust a value.

Copycopy code to clipboard
1import UIKit
2
3class SliderView: UIView {
4    private let slider = UISlider()
5
6    override init(frame: CGRect) {
7        super.init(frame: frame)
8        addSubview(slider)
9        slider.translatesAutoresizingMaskIntoConstraints = false
10        NSLayoutConstraint.activate([
11            slider.leadingAnchor.constraint(equalTo: leadingAnchor),
12            slider.trailingAnchor.constraint(equalTo: trailingAnchor),
13            slider.topAnchor.constraint(equalTo: topAnchor),
14            slider.bottomAnchor.constraint(equalTo: bottomAnchor),
15        ])
16    }
17
18    required init?(coder: NSCoder) {
19        fatalError("init(coder:) has not been implemented")
20    }
21}

Here, we've created a custom UIView called SliderView that contains a UISlider. We've also added constraints so that the UISlider fills the entire SliderView.

Next, let's create a UIViewControllerRepresentable that will wrap our SliderView and make it available for use in our SwiftUI app.

Copycopy code to clipboard
1import SwiftUI
2
3struct SliderViewController: UIViewControllerRepresentable {
4    typealias UIViewControllerType = UIViewController
5    
6    func makeUIViewController(context: Context) -> UIViewController {
7        let sliderView = SliderView()
8        let viewController = UIViewController()
9        viewController.view.addSubview(sliderView)
10        sliderView.translatesAutoresizingMaskIntoConstraints = false
11        NSLayoutConstraint.activate([
12            sliderView.leadingAnchor.constraint(equalTo: viewController.view.leadingAnchor),
13            sliderView.trailingAnchor.constraint(equalTo: viewController.view.trailingAnchor),
14            sliderView.topAnchor.constraint(equalTo: viewController.view.topAnchor),
15            sliderView.bottomAnchor.constraint(equalTo: viewController.view.bottomAnchor),
16        ])
17        return viewController
18    }
19
20    func updateUIViewController(_ uiViewController: UIViewController, context: Context) {}
21}

Here, we've defined a UIViewControllerRepresentable called SliderViewController that conforms to the UIViewControllerRepresentable protocol. In the makeUIViewController(context:) method, we create a new instance of our SliderView and add it as a subview of a new UIViewController. We then set up the constraints so that the SliderView fills the entire content area of the view controller.

Finally, we return the view controller from the makeUIViewController(context:) method.

We don't need to do anything in the updateUIViewController(_:context:) method, so we leave it empty.

Using the SliderViewController in SwiftUI

Now that we have our SliderViewController, we can use it in our SwiftUI app by simply adding it to our view hierarchy.

Copycopy code to clipboard
1import SwiftUI
2
3struct ContentView: View {
4    var body: some View {
5        VStack {
6            Text("Value: ")
7            SliderViewController()
8                .frame(height: 50)
9        }
10    }
11}

Here, we've added our SliderViewController to a VStack in our ContentView. We've also added a Text view to display the value of the slider.

When we run our app, we should see a UISlider that we can slide left and right to adjust the value.