SwiftUI NavigationStack animation problem when navigating back to parent view

Question

I have a parent view with a NavigationStack containing a List with NavigationLinks, the NavigationStack have a large title.

These NavLinks go to an other List with Sections in it, this List have a inline title.

The problem appears when going back to the parent view, the NavigationStack's title is rendered as .inline for half a second and then go back to the .large title place.

Here's my parent view :

struct TeamsView: View {
    var body: some View {
        NavigationStack {
            List {
                Section {
                    NavigationLink {
                        ChildView()
                    } label: {
                        Text("Test")
                    }
                }
            }
            .navigationTitle("Title 1")
            .navigationBarTitleDisplayMode(.large)
        }
    }
}

The child view :

struct ChildView: View {
    var body: some View {
         List {
              Section {
                  //...
              }
              Section {
                  //...
              }
         }
         .navigationTitle("Title 2")
         .navigationBarTitleDisplayMode(.inline)
     }
}

And here is a GIF of the animation problem :

I've made some tests with differents simulator devices, real device, to change where the .navigationTitle is applied in both parent and child view, to remove the NavStack from the child view... and I couldn't find a solution.

Answer 1

You shouldn't need the additional NavigationStack within ChildView. Its inclusion causes a new navigation bar to be created as you push, and destroyed as you go back, so the SwiftUI drawing system doesn't correctly link the back button to the title in the parent view.

struct ChildView: View {
    var body: some View {
        List {
            Section {
                //...
            }
            Section {
                //...
            }
        }
        .navigationTitle("Title 2")
        .navigationBarTitleDisplayMode(.inline)
    }
}

This means that the preview for ChildView will look odd as by default it no longer sits in its own navigation stack. You can remedy that by adding a stack into your preview code. For example:

struct ChildView_Previews: PreviewProvider {
  static var previews: some View {
    NavigationStack {
      ChildView()
    }
  }
}

Answer 2

Changing the NavigationStack to a NavigationView in the parent view resolved my issue, I can't understand why but it worked.

Parent view :

struct TeamsView: View {
    var body: some View {
        NavigationView {
            List {
                Section {
                    NavigationLink {
                        ChildView()
                    } label: {
                        Text("Test")
                    }
                }
            }
            .navigationTitle("Title 1")
            .navigationBarTitleDisplayMode(.large)
        }
    }
}

Child view :

struct ChildView: View {
    var body: some View {
        List {
            Section {
                Text("test")
            }
            Section {
                Text("test2")
            }
        }
        .navigationTitle("Title2")
        .navigationBarTitleDisplayMode(.inline)
    }
}