jus10
jus10

Reputation: 51

Why does the navigation title change from large to "scrolled" when popping a NavigationLink inside a NavigationStack on iOS 16?

I have run into some unexpected behavior when using a NavigationLink inside a NavigationStack. If I navigate from a view with a large navigation title to a view with an inline title, the title display mode does not automatically revert to large when navigating back to the original view – I have swipe down to "pull" the title back down to it's original position.

Example of the behavior

I would expect the out-of-the-box behavior to be the way it is in all of Apple's apps: large title animates smoothly into the "back" button in the NavigationLink destination view, then animates back to large size when popping the view.

I have isolated the issue to the .navigationBarTitleDisplayMode(.inline) modifier on the NavigationLink destination view, as commenting it out resolves the issue. This behavior is not present in the XCode (14 or 14.1) live preview, but it is present in the XCode simulator, running iOS 16 and 16.1 on both simulated and physical iPhones. I also confirmed the behavior in Swift Playgrounds version 4.2 on iPadOS 16.1

Here is some basic code that reproduces the issue, as seen above:

struct Test: View {
    var body: some View {
        NavigationStack {
            List {
                NavigationLink("Link") {
                    Text("Test")
                        .navigationTitle("Title")
                        .navigationBarTitleDisplayMode(.inline)

                }
            }
            .navigationTitle("Test View")
        }
    }
}

I'm curious if this behavior is just a simulator bug, or if it will show up in production apps. I would rather not fall back to NavigationView, if possible, since it has been deprecated; I want to try to future-proof my efforts as much as I can.

Upvotes: 3

Views: 992

Answers (1)

Maschina
Maschina

Reputation: 926

This is an issue when pushed sub-views have a dedicated .navigationBarTitleDisplayMode(.inline).

You can force the "large display mode" by setting .navigationBarTitleDisplayMode(.large) to your Test view inside the NavigationStack.

Upvotes: 2

Related Questions