SwiftUI View in front of Navigation Bar

Viewed 1797

In the iOS app that I'm making, I use a NavigationLink to go from my main view to another one. I want a button present in both views' navigation bars, which will overlay a blur on top of all of the content in the view. In the main view, the blur works just fine, but on the second view, the Navigation Bar and the Navigation Bar Title do not get blurred and stay on top of the blur view.

How can I make the Navigation view appear under the blur in the second view?

Main view:

var body: some View {
    ZStack {
        NavigationView {
            ScrollView(.vertical) {
                . . .
            }
            .navigationBarItems(
            leading: Button(action: {
                    showBlurView.toggle()
                }) {
                    Text("Show blur view")
                }
            ),
            trailing: Button(action: {
                    NavigationLink(destination: SecondView()) {
                        Text("2nd view")
                    }
                }
            )
        }
        
        BlurEffectView(style: .systemThinMaterial)
            .edgesIgnoringSafeArea(.all)
            .hidden(showBlurView == true ? false : true)

    }
}

Second View:

var body: some View {
    ZStack {
        VStack {
            ...
        }.navigationBarTitle("Second View")

    BlurEffectView(style: .systemThinMaterial)
            .edgesIgnoringSafeArea(.all)
            .hidden(showBlurView == true ? false : true)
            
    }
}

And the code for the BlurEffectView:

struct BlurEffectView: UIViewRepresentable {
    let style: UIBlurEffect.Style = .systemMaterial

    func makeUIView(context: Context) -> UIVisualEffectView {
        return UIVisualEffectView(effect: UIBlurEffect(style: style))
    }

    func updateUIView(_ uiView: UIVisualEffectView, context: Context) {
        uiView.effect = UIBlurEffect(style: style)
    }
}
0 Answers
Related