Draw a view over the navigation bar

Question

I'm working on a bottom sheet that can be invoked from any other screen. The bottom sheet will be displayed on top of a half-opaque overlay and I would like the overlay to render full screen over any other view including the navigation bar and the tab bar.

However, I can't seem to be able to figure out how to get the content of the navigation bar to be behind the overlay. Here is what a demo of my current implementation looks like. As you can see, it's possible to interact with the content of the navigation bar even though it is visually displayed behind the overlay.

Half Screen	Full Screen	Back button is still active

And here is the simplified code of my current implementation:

import SwiftUI

struct MainNavigationView: View {
  var body: some View {
    NavigationView {
      NavigationLink(destination: AnoterView()) {
        Text("Navigate to the next screen")
      }
    }
  }
}

struct AnoterView: View {
  var body: some View {
    ZStack {
      Color(uiColor: .red)
        .edgesIgnoringSafeArea(.all)
        .navigationTitle("Test")
        .navigationBarTitleDisplayMode(.inline)

      ViewWithOverlay()
    }
  }
}

struct ViewWithOverlay: View {
  var body: some View {
    ZStack {

      // I'd like this overlay to be rendered over the navigation bar
      Color(uiColor: .blue)
        .edgesIgnoringSafeArea(.all)

      Color(uiColor: .green)
    }
  }
}

And the outcome:

As you can see, while the blue color, which represent my overlay, is drawn over the red color, the title and the back button are still displayed on top of the blue color.

I understand why this is happening, but I cannot think of any workaround in SwiftUI to fix this that can be invoked from any view.

Any help is appreciated.

Answer 1

One thing you can do is to put the NavigationView inside a ZStack. This way it will be in a lower layer hidden by the layer above. Here is the code that completely hides the NavigationBar on the tap of the button.

struct ContentView: View {
    
    @State private var isPresented: Bool = false
    
    var body: some View {
        ZStack {
            NavigationView {
                Text("Hello World")
                    .navigationTitle("Welcome")
            }
            
            VStack {
                
            }.frame(maxWidth: isPresented ? .infinity: 0, maxHeight: isPresented ? .infinity: 0)
                .background(.green)
            
            Button("Animate") {
                withAnimation {
                    isPresented.toggle()
                }
            }
        }
    }
}