SwiftUI NavigationBar using UIHostingController does not Display correctly until NSLayoutConstraint is broken

Question

Created Mar ’24

Replies 0

Boosts 0

Participants 1

I'm facing an issue where the navigation bar title of a SwiftUI view does not display correctly on the first render. It only appears correctly after switching to another tab and then coming back. Alongside this issue, I'm receiving the following constraint error in the console:

`[UIKitCore] Unable to simultaneously satisfy constraints.
Probably at least one of the constraints in the following list is one you don't want.
Try this:
(1) look at each constraint and try to figure out which you don't expect;
(2) find the code that added the unwanted constraint or constraints and fix it.
(Note: If you're seeing NSAutoresizingMaskLayoutConstraints that you don't understand, refer
to the documentation for the UIView property translatesAutoresizingMaskIntoConstraints)
(
"<NSAutoresizingMaskLayoutConstraint:0x6000021d2a30 h=-&- v=--& Test.minY == 0   (active,
names: Test:0x11560c7c0, '|':UILayoutContainerView:0x11560e180 )>",
"<NSAutoresizingMaskLayoutConstraint:0x6000021d08c0 h=-&- v=--& Test.height == 96   (active,
names: Test:0x11560c7c0 )>",
"<NSLayoutConstraint:0x6000021d70c0
V:[Test]-(0)-[UIFocusContainerGuide:0x600003deab20'UINavigationControllerContentFocusContainerGuide']
(active, names: Test:0x11560c7c0 )>",
"<NSLayoutConstraint:0x6000021d61c0
UIFocusContainerGuide:0x600003deab20'UINavigationControllerContentFocusContainerGuide'.bottom
== UILayoutContainerView:0x11560e180.bottom   (active)>",
"<NSLayoutConstraint:0x6000021c6bc0 'UIView-Encapsulated-Layout-Height'
UILayoutContainerView:0x11560e180.height == 0   (active)>"
)

Will attempt to recover by breaking constraint
<NSLayoutConstraint:0x6000021d70c0
V:[Test]-(0)-[UIFocusContainerGuide:0x600003deab20'UINavigationControllerContentFocusContainerGuide']
(active, names: Test:0x11560c7c0 )>

Make a symbolic breakpoint at UIViewAlertForUnsatisfiableConstraints to catch this in the
debugger.
The methods in the UIConstraintBasedLayoutDebugging category on UIView listed in
<UIKitCore/UIView.h> may also be helpful.`

SwiftUI View struct ContentView: View {

var body: some View {
    NavigationStack {
        ScrollView {
            VStack(spacing: 20) {
                ForEach(0..<10) { index in
                    VStack {
                        Text("Section \(index)").font(.headline).padding()
                        ForEach(0..<5) { itemIndex in
                            Text("Item \(itemIndex)").padding()
                        }
                    }
                    .frame(maxWidth: .infinity)
                    .background(Color.gray.opacity(0.2))
                    .cornerRadius(10)
                    .padding(.horizontal)
                }
            }
        }.navigationTitle("Overview").navigationBarTitleDisplayMode(.automatic)
    }
}

}


ExpoView extends ... extends UIView

class ExpoContentView: ExpoView {
    required init(appContext: AppContext? = nil) {
        super.init(appContext: appContext)
        self.backgroundColor = .white
        // Init the view controller
        let contentView = ContentView()
        let hostingController = UIHostingController(rootView: contentView)
        setupHostingController(hostingController)
        func setupHostingController(_ hostingController: UIHostingController<some View>) {
            hostingController.view.translatesAutoresizingMaskIntoConstraints = false
            hostingController.view.backgroundColor = .clear
            addSubview(hostingController.view)
            NSLayoutConstraint.activate([
                hostingController.view.topAnchor.constraint(equalTo: self.topAnchor),
                hostingController.view.bottomAnchor.constraint(equalTo: safeAreaLayoutGuide.bottomAnchor),
                hostingController.view.leadingAnchor.constraint(equalTo: safeAreaLayoutGuide.leadingAnchor),
                hostingController.view.trailingAnchor.constraint(equalTo: safeAreaLayoutGuide.trailingAnchor)
            ])
           
        }
       
    }

How can I achieve that it is correctly shown at the first render?

Boost