SwiftUI
is easy, and more swifty! So why not use it in your existing app? Learn how to use SwiftUI in your UIViewController in your existing app using UIHostingController. You can use SwiftUI
with UIKit
very easily with the help of UIHostingController
.
Here’s an example of how to add SwiftUI
to your app:
First of all, Let’s create a SwiftUIView
:
struct SwiftUIView: View {
var body: some View {
VStack {
Text("Hello World")
}
}
}
Since UIKit
does not speak SwiftUI
, let’s introduce a mediator here, UIHostingController
!
UIHostingController
creates a bridge between UIKit
and SwiftUI
framework. It works as a Container View for SwiftUI
view, meaning you can use it as normal UIViewController
.
Let’s understand this with an example:
First, create a UIViewController
subclass named SwiftUIViewController
:
class SwiftUIViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
// 1.
let swiftUIView = SwiftUIView()
// 2.
let hostingController = UIHostingController.init(rootView: swiftUIView)
// 3.
self.addChild(hostingController)
// 4.
hostingController.didMove(toParent: self)
// 5.
self.view.addSubview(hostingController.view)
// 6.
hostingController.view.translatesAutoresizingMaskIntoConstraints = false
NSLayoutConstraint.activate([
hostingController.view.topAnchor.constraint(equalTo: self.view.topAnchor),
hostingController.view.leadingAnchor.constraint(equalTo: self.view.leadingAnchor),
hostingController.view.trailingAnchor.constraint(equalTo: self.view.trailingAnchor),
hostingController.view.bottomAnchor.constraint(equalTo: self.view.bottomAnchor),
])
}
}
Let’s go step by step through the code:
1. Here, we used our previously created SwiftUIView
in a SwiftUIViewController
2. To use the SwiftUIView
in our SwiftUIViewController
, We created UIHostingController
for our SwiftUIView
3. Now, Let’s add UIHostingController
as a child to our UIViewController
4. To explain why we did this, Let me quote Apple Documentation:
If you are implementing your own container view controller, it must call the
didMove(toParent:)
method of the child view controller after the transition to the new controller is complete or, if there is no transition, immediately after calling theaddChild(_:)
method.
5. Let’s add UIHostingController
‘s view to the UIViewController
‘s view
6. Finally, setup constraints for UIHostingController
‘s view.
Note: We can also assign value to the frame
of UIHostingController
‘s view. However using constraints is more advisable.
Example Output:

That’s all on how to Use SwiftUI in your UIViewController using UIHostingController.
Read more about UIHostingController
on Apple Documentation.
If you want to learn how to convert your existing UIViewController
s to SwiftUI
, then read it here!
Let us know how you used SwiftUI
in UIViewController
in your app in the comments!
12 Comments