0

I want to animate the visibility of the navigation bar, and have the content of the screen smoothly move up and down with it. Applying the animation(_:value:) modifier makes the navigation bar animate smoothly, but the content of the screen jumps instead of animating.

Applying the animation(_:) modifier without a value parameter does the trick, but unfortunately that is deprecated and has other unwanted side effects. Wrapping the button action in a withAnimation block doesn't work either.

Contrived example:

struct ContentView: View {
    @State private var showNavBar = true

    var body: some View {
        NavigationStack {
            Button("Toggle nav bar") {
                showNavBar.toggle()
            }
            .navigationTitle("Test")
            .toolbar(showNavBar ? .visible : .hidden)
            .animation(.default, value: showNavBar)
        }
    }
}

The result, as you can see the position of the button doesn't animate:

enter image description here

Rengers
  • 14,911
  • 1
  • 36
  • 54

0 Answers0