SwiftUI Constraint Issue For NavigationTitle in iOS 15

Question

I'm having an issue with Xcode throwing a constraint message in the console every time I use a NavigationTitle.

I'd like to say that I've read through the following post and have tried adding StackedNavigationViewStyle(). This worked for iOS 14 and Xcode 12.3. Since upgrading to iOS 15 and Xcode 13 the solution stops working.

SwiftUI NavigationView navigationBarTitle LayoutConstraints issue

The message is.

[LayoutConstraints] 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. ( "<NSLayoutConstraint:0x28189d540 UIView:0x155f53c50.trailing == _UIBackButtonMaskView:0x155f538f0.trailing (active)>", "<NSLayoutConstraint:0x281890af0 'Mask_Trailing_Trailing' _UIBackButtonMaskView:0x155f538f0.trailing == _UIButtonBarButton:0x155f52d00.trailing (active)>", "<NSLayoutConstraint:0x2818912c0 'MaskEV_Leading_BIB_Trailing' H:[_UIModernBarButton:0x155f53610]-(0)-[UIView:0x155f53c50]
(active)>", "<NSLayoutConstraint:0x281890c30 'UINav_static_button_horiz_position' _UIModernBarButton:0x155f53610.leading == UILayoutGuide:0x2802a5ce0'UIViewLayoutMarginsGuide'.leading
(active)>", "<NSLayoutConstraint:0x281890640 'UINavItemContentGuide-leading' H:[_UIButtonBarButton:0x155f52d00]-(6)-[UILayoutGuide:0x2802a5dc0'UINavigationBarItemContentLayoutGuide'] (active)>", "<NSLayoutConstraint:0x28189dd60 'UINavItemContentGuide-trailing' UILayoutGuide:0x2802a5dc0'UINavigationBarItemContentLayoutGuide'.trailing == _UINavigationBarContentView:0x155f51f30.trailing (active)>", "<NSLayoutConstraint:0x28189b340 'UIView-Encapsulated-Layout-Width' _UINavigationBarContentView:0x155f51f30.width == 0 (active)>", "<NSLayoutConstraint:0x28189e300 'UIView-leftMargin-guide-constraint' H:|-(8)-UILayoutGuide:0x2802a5ce0'UIViewLayoutMarginsGuide'
(active, names: '|':_UINavigationBarContentView:0x155f51f30 )>" )

Will attempt to recover by breaking constraint <NSLayoutConstraint:0x28189d540 UIView:0x155f53c50.trailing == _UIBackButtonMaskView:0x155f538f0.trailing (active)>

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.

When adding StackedNavigationViewStyle to an iOS 15 app the Title and TabBar become inactive and the list moves underneath.

The code for this is below.

struct Tab1: View {
    
    var body: some View {
        //        // Used for PacificBlue color.
        UITableView.appearance().backgroundColor = .clear
        //        UITableView.appearance().separatorColor = UIColor(Color.white)
        
        return NavigationView {
            ZStack {
                Color.pacificBlue
                    .edgesIgnoringSafeArea(.all)
                List {
                    ForEach(1..<100) { index in
                        if #available(iOS 15.0, *) {
                            NavigationLink(destination: DetailView()) {
                                HStack {
                                    Text("Row \(index)")
                                    //
                                        .listRowSeparatorTint(Color.pink)
                                }
                                .background(Color.pacificBlue)
                                
                            } // NavigationLink
                            .listRowSeparatorTint(Color.pink)
                        } else {
                            // Fallback on earlier versions
                            NavigationLink(destination: DetailView()) {
                                Text("Row \(index)")
                            } // NavigationLink
                        } // if else
                    } // ForEach
                    .listRowBackground(Color.pacificBlue)
                } // List
                .listStyle(PlainListStyle())
            } // ZStack
            .navigationTitle("Title")
        } // NavigationView
        .navigationViewStyle(StackNavigationViewStyle())
    } // View
}

If built on iOS 14 the expected behavior is seen.

Any help would be appreciated.

Answer 1

Recently, I was challenged by the same issue of NavigationBar and TabBar becoming transparent and unresponsive to scroll with IOS 15.0 exclusively, while IOS 14 and IOS 15.2 and above had normal behavior. After many hours of identifying the problem, I discovered that it caused by combination of .navigationViewStyle(.stack) and the ZStack that's used inside to provide Color as background. I have no explanation why it behaves like that, neither why the solutions work.

Option 1: Wrap the NavigationView with another ZStack

struct ContentView: View {
    var body: some View {
        UITableView.appearance().backgroundColor = .clear

        return ZStack {
            NavigationView {
                ZStack {
                    Color.blue
                        .edgesIgnoringSafeArea(.all)

                    List {
                        ForEach(1...50, id:\.self) { index in
                            Text("Row \(index)")
                        }
                    }
                }
                .navigationTitle("Title")
            }
            .navigationViewStyle(.stack)
        }
    }
}

Option 2: Apply the ZStack only to IOS 15 with a ViewModifier

struct ContentView: View {
    var body: some View {
        UITableView.appearance().backgroundColor = .clear

        return NavigationView {
            ZStack {
                Color.blue
                    .edgesIgnoringSafeArea(.all)

                List {
                    ForEach(1...50, id:\.self) { index in
                        Text("Row \(index)")
                    }
                }
            }
            .navigationTitle("Title")
        }
        .navigationViewStyle(.stack)
        .modifier(NavigationModifier())
    }
}

struct NavigationModifier: ViewModifier {
    func body(content: Content) -> some View {
        if #available(iOS 15.0, *) {
            ZStack {
                content
            }
        } else {
            content
        }
    }
}

Answer 2

I had the same problem using NavigationView and TabView together. Until iOS 14 I used the code bellow and it worked without problem:

NavigationView{
    TabView(selection: $selection) {
            ...
    }
}

However, since iOS 15, the same code started having the same navigationTitle you're having.

After a lot of time searching for a solution I found that if we change the order it works perfectly:

struct ContentView: View {
    var body: some View {    
        TabView(selection: $selection) {
            NavigationView {
                Text("Example 1")
                .navigationTitle("One")
            }
            .tabItem {
                Text("One")
            }
            .tag("One")
        
            NavigationView {
                Text("Example 2")
                .navigationTitle("Two")
            }
            .tabItem {
                Text("Two")
            }
            .tag("Two")
        }
    }
}