Overlay in front of SwiftUI tab view - ios

Question

I'm using SwiftUI's TabView and I want to add a custom bottomSheet() modifier which accepts a view and displays it like the standard sheet() modifier, but without occupying the entire screen.
Current Behaviour: I managed to create the custom modifier and show a sheet, but the sheet comes up behind the bottom tab bar (since it is displayed from within the NavigationView).
Expected Behavior: I'm looking for a way to cover the tab bar with the sheet in front.
Minimal Reproducible Example
Here's the custom modifier that I've created.
struct BottomSheet<SheetContent: View>: ViewModifier {
let sheetContent: SheetContent
#Binding var isPresented: Bool
init(isPresented: Binding<Bool>, #ViewBuilder content: () -> SheetContent) {
self.sheetContent = content()
_isPresented = isPresented
}
func body(content: Content) -> some View {
ZStack {
content
if isPresented {
ZStack {
Color.black.opacity(0.1)
VStack {
Spacer()
sheetContent
.padding()
.frame(maxWidth: .infinity)
.background(
Rectangle()
.foregroundColor(.white)
)
}
}
}
}
}
}
extension View {
func bottomSheet<SheetContent: View>(isPresented: Binding<Bool>, #ViewBuilder content: #escaping () -> SheetContent) -> some View {
self.modifier(BottomSheet(isPresented: isPresented, content: content))
}
}
Here's how I'm using it.
struct ScheduleTab: View {
#State private var showSheet = false
var body: some View {
NavigationView {
Button("Open Sheet") {
showSheet.toggle()
}
}
.navigationTitle("Today")
.navigationBarTitleDisplayMode(.inline)
.bottomSheet(isPresented: $showSheet) {
Text("Hello, World")
}
}
}