Logo for tanaschita.com

How to combine SwiftUI and UIKit views in iOS

Learn how to bridge SwiftUI and UIKit views.

13 May 2024 · 4 min read

With SwiftUI pushing UIKit into the background since 2019, UIKit may still be part of existing iOS applications.

To combine those two worlds, Apple provides tools to place UIKit views and view controllers inside SwiftUI views, and vice versa.

Let's look at how to do that.

Sponsorship logo
Preparing for a technical iOS job interview - updated for iOS 18
Check out my book on preparing for a technical iOS job interview with over 200 questions & answers. Test your knowledge on iOS topics such as Swift, SwiftUI, Combine, HTTP Networking, Authentication, SwiftData & Core Data, Concurrency with async/await, Security, Automated Testing, Machine Learning and more.
LEARN MORE

Using UIKit views inside SwiftUI views

To use a UIKit view in a SwiftUI view, we wrap the UIKit view in a SwiftUI view that conforms to the UIViewRepresentable protocol.

struct Label: UIViewRepresentable {
@Binding var title: String
func makeUIView(context: Context) -> UILabel {
let label = UILabel()
return label
}
func updateUIView(_ label: UILabel, context: Context) {
label.text = title
}
}

When implementing the UIViewRepresentable protocol, we need to implement two methods:

  • makeUIView where we create and return our UIKit view.
  • updateUIView which gets called from SwiftUI every time state changes happen, so we can update our UIKit view accordingly.

Using UIKit view controllers in SwiftUI views

In SwiftUI, there is no concept of a UIKit view controller - everything is a view.

To embed a view controller in a SwiftUI view, we can use the same approach as described above. With the only difference, that this time, the SwiftUI view conforms to the UIViewControllerRepresentable protocol:

struct SomeView: UIViewControllerRepresentable {
@Binding var title: String
func makeUIViewController(context: Context) -> SomeViewController {
let vc = SomeViewController()
return vc
}
func updateUIViewController(_ uiViewController: SomeViewController, context: Context) {
uiViewController.title = title
}
}

As we can see above, it has equivalent methods as the UIViewRepresentable protocol.

Using SwiftUI views inside UIKit views

For using SwiftUI views inside UIKit, Apple provides a class named UIHostingViewController. We simply initialize a UIHostingController with the SwiftUI view and then use it as usual.

let vc = UIHostingController(rootView: Text("Hi"))
Sponsorship logo
Preparing for a technical iOS job interview - updated for iOS 18
Check out my book on preparing for a technical iOS job interview with over 200 questions & answers. Test your knowledge on iOS topics such as Swift, SwiftUI, Combine, HTTP Networking, Authentication, SwiftData & Core Data, Concurrency with async/await, Security, Automated Testing, Machine Learning and more.
LEARN MORE

Newsletter

Image of a reading marmot
Subscribe

Like to support my work?

Say hi

Related tags

Articles with related topics

swiftui

uikit

swift

ios

How to implement a UIViewController delegate when working with SwiftUI

Learn how to use SwiftUI's coordinators to communicate with UIKit.

08 May 2023 · 4 min read

Latest articles and tips

© 2024 tanaschita.com

Privacy policy

Impressum