Make SwiftUI View embedded in Storyboard ViewController use full Screen Width - ios

Question

Problem
Hello, I need help with a SwiftUI View that is presented by a View Controller that is configured in a storyboard.
I present a SwiftUI View including its own model using a UIHostingController as described in this post: addSubView SwiftUI View to UIKit UIView in Swift.
Now my view is shrunken inside its Hosting View Controller's view property to its content size.
What I have tried
Wrapping a ContainerView inside the Parent View Controller into two StackViews to force the view to use the whole screen (vertical and horizontal)
Configuring the initial VStack inside my SwiftUI View with .frame(minWidth: 0, maxWidth: .infinity)
Using an initial HStack with a Spacer() beneath and below all elements within that stack as suggested in Make a VStack fill the width of the screen in SwiftUI
Some Code
View Controller:
class SomeParentViewController: UIViewController {
var detailsView: DetailsOverlayView? // --> SwiftUI View
var detailsViewModel: DetailsOverlayViewModel? // --> Its model
var childVC: UIHostingController<DetailsOverlayView>? // --> Child VC to present View
// inside UIView
var detailData: DetailData?
override func viewDidLoad() {
super.viewDidLoad()
if let data = detailData {
model = DetailsOverlayViewModel(data: data)
}
if let m = model {
detailsView = DetailsOverlayView(viewModel: m)
}
if let v = paymentDetailsView {
child = UIHostingController(rootView: v)
child?.view.translatesAutoresizingMaskIntoConstraints = false
child?.view.frame = self.view.bounds
}
}
override func viewWillAppear(_ animated: Bool) {
super.viewWillAppear(animated)
if let cvc = childVC {
self.addSubview(cvc.view)
self.addChild(cvc)
}
}
...
}
The SwiftUI View:
...
var body: some View {
VStack(alignment: .leading, spacing: 16) {
// Title
HStack {
Text("My great and awesome title")
}
VStack(alignment: .leading, spacing: 0) {
Text("My even more awesome subtitle")
HStack(alignment: .top) {
Text("on the left 1")
Spacer()
Text("on the right 1")
}
HStack(alignment: .top) {
Text("on the left 2")
Spacer()
Text("on the right 2")
}
Divider()
}
}
.frame(minWidth: 0, maxWidth: .infinity)
.padding(16)
}
...
A Picture of the Result

Answer 1

Well considering a SwiftUI view wrapped in a UIHostingController acts the same way a UIViewController does, you would define autolayout constraints the same way.
Having declared translatesAutoresizingMaskIntoConstraints = false, I'm going to assume that's the plan. In that case, what I'd suggest is the following:
NSLayoutConstraint.activate([
child.view.centerXAnchor.constraint(equalTo: self.view.centerXAnchor),
child.view.centerYAnchor.constraint(equalTo: self.view.centerYAnchor),
child.view.widthAnchor.constraint(equalTo: self.view.widthAnchor),
child.view.heightAnchor.constraint(equalTo: self.view.heighAnchor)
])
The above makes the UIHostingController the same size as the parent controller and centered to it. The height and width anchors can be constants such that you'd do .constraint(equalToConstant: 150), or whatever other variation you'd prefer.