How to animate navigationBarHidden in SwiftUI?

Question

struct ContentView: View {
    @State var hideNavigationBar: Bool = false
    
    var body: some View {
        NavigationView {
            ScrollView {
                VStack {
                    Rectangle().fill(Color.red).frame(height: 50)
                        .onTapGesture(count: 1, perform: {
                            withAnimation {
                                self.hideNavigationBar.toggle()
                            }
                        })
                    VStack {
                        ForEach(1..<50) { index in
                            HStack {
                                Text("Sample Text")
                                Spacer()
                            }
                        }
                    }
                }
            }
            .navigationBarTitle("Browse")
            .navigationBarHidden(hideNavigationBar)
        }
    }
}

When you tap the red rectangle it snaps the navigation bar away. I thought withAnimation{} would fix this, but it doesn't. In UIKit you would do something like this navigationController?.setNavigationBarHidden(true, animated: true).

Tested in xCode 12 beta 6 and xCode 11.7

Answer 1

You could try using

.navigationBarHidden(hideNavigationBar).animation(.linear(duration: 0.5)) instead of .navigationBarHidden(hideNavigationBar)

and also move self.hideNavigationBar.toggle() out of the animation block. That is not required if you use the above approach for hiding of navigation bar with animation.

Answer 2

I think, the only solution is to use a position function in SwiftUI 2

var body: some View {
    GeometryReader { geometry in
        NavigationView {
            ZStack {
                Color("background")
                    .ignoresSafeArea()
                
                // ContentView
            }
            .navigationBarTitleDisplayMode(.inline)
            .navigationBarItems(leading: logo, trailing: barButtonItems)
            .toolbar {
                ToolbarItem(placement: .principal) {
                    SearchBarButton(placeholder: LocalizedStringKey("home_vc.search_bar.placeholder"))
                        .opacity(isNavigationBarHidden ? 0 : 1)
                        .animation(.easeInOut(duration: data.duration))
                }
                
            }
        }
        .frame(height: geometry.size.height + (isNavigationBarHidden ? 70 : 0))
         // This is the key ⬇
        .position(x: geometry.size.width/2, y: geometry.size.height/2 - (isNavigationBarHidden ? 35 : 0))
        .animation(.easeInOut(duration: 0.38))
        .onTapGesture {
            isNavigationBarHidden.toggle()
        }
    }
}