I have a view inside of a navigation bar that I am using as a photo preview. I'd like to mimic the Photo's app behavior, and have the image extend past the navigation bar, with the contents blurred by the navigation bar in the background. If you'd like to see an example of what I'm looking to replicate, open the Photos app and select a photo, the navigation bar covers the content that extends beyond it.
However, when I extend the View to disregard the safe areas, the navigation bar is fully transparent, and the photo is not blurred at all.
I've noticed on the parent view (LazyVGrid in a ScrollView) when scrolling the view under the navigation bar, the navigation bar has my desired effect.
Is there any way to force this behavior when the view in not in a ScrollView?
Here is my code for the photo preview view.
However, when I extend the View to disregard the safe areas, the navigation bar is fully transparent, and the photo is not blurred at all.
I've noticed on the parent view (LazyVGrid in a ScrollView) when scrolling the view under the navigation bar, the navigation bar has my desired effect.
Is there any way to force this behavior when the view in not in a ScrollView?
Here is my code for the photo preview view.
Code Block import SwiftUI struct PhotoDetailView: View { var photo: Photo @State var isNavbarHidden: Bool = false var body: some View { ZStack { Rectangle() .frame(minWidth: /*@START_MENU_TOKEN@*/0/*@END_MENU_TOKEN@*/,maxWidth: /*@START_MENU_TOKEN@*/.infinity/*@END_MENU_TOKEN@*/, minHeight: /*@START_MENU_TOKEN@*/0/*@END_MENU_TOKEN@*/,maxHeight: /*@START_MENU_TOKEN@*/.infinity/*@END_MENU_TOKEN@*/, alignment: /*@START_MENU_TOKEN@*/.center/*@END_MENU_TOKEN@*/) .edgesIgnoringSafeArea(.all) .foregroundColor(isNavbarHidden ? .black : Color(UIColor.systemBackground)) Image(data: photo.imageData, placeholder: "No Image") .resizable() .aspectRatio(contentMode: .fit) } .edgesIgnoringSafeArea(.all) // .navigationBarHidden(isNavbarHidden) .navigationBarTitle("Test Title", displayMode: .inline) .onTapGesture(count: /*@START_MENU_TOKEN@*/1/*@END_MENU_TOKEN@*/, perform: { withAnimation { isNavbarHidden.toggle() } }) } }