Bumpy navigation animation on back button

I was determined to fully rely on SwiftUI's navigation system giving the fact I'm starting a new project - strongly reconsidering this after a very basic requirement.

Namely: navigate between my two screens while wanting to hide the back button label.

  • One of them has a large navigation title
  • The other one has no navigation title

The problem is that back button icon simply jumps from top, a little bit down (where the title is supposed to be) and then back to top while navigating - resulting in a rough bouncy animation.

struct ParentView: View {
    var body: some View {
        NavigationStack {
            WelcomeView()
                .navigationDestination(for: WelcomeRoute.self) { route in
                    destinationView(for: route)
                }
           }
      }
...
}

struct WelcomeView: View {
    var body: some View {
        ScrollView {
            VStack {
                ...
                NavigationLink(value: WelcomeRoute.Routes.next) {
                    Text("Next screen")
                }
            }
        }
        .navigationTitle("WELCOME")
        .navigationBarTitleDisplayMode(.large)
    }
}

struct NextWelcomeView: View {
    var body: some View {
        ScrollView {
            VStack {
               ....
               Text("Hello")
            }
        }
        .toolbarRole(.editor)
    }
}

That’s odd, are you able to reproduce the same behaviour using an inline display mode?

Also could you specify the build environment you’re testing on.

No. Inline works fine. Building on iOS 18.4, Xcode 16.3, Swift 6

Bumpy navigation animation on back button
 
 
Q