In SwiftUI, how do I draw a view above a bottom toolbar? - swiftui

Question

I have a view with a bottom toolbar. When some user action is performed, I would like to display a drawer coming from the bottom that will cover this toolbar. I wasn't able to find a way to do this - the toolbar always remains on top. Here's an example of something I've tried:
struct ContentView: View {
var body: some View {
NavigationView {
ZStack {
VStack {
Spacer()
Text("Bottom Text")
}
.ignoresSafeArea(.all, edges: .bottom)
Text("Hello, world!")
.toolbar {
ToolbarItemGroup(placement: .bottomBar) {
Text("Bottom Bar")
}
}
}
}
}
}
The "Bottom Text" label gets hidden behind the bottom toolbar.
The one thing I've tried so far is to remove the .toolbar modifier when the drawer is shown (by creating a custom view modifier that returns the .toolbar modifier conditionally). This works but seems like a hack, and also has some UI artifacts as the removal of the toolbar can shift some of the other view.
Any ideas how this can be solved?
Thanks!

Answer 1

To show content on top of the bottom toolbar, add your views as an overlay on the NavigationView itself:
var body: some View {
NavigationView {
Text("Hello, world!")
.toolbar {
ToolbarItemGroup(placement: .bottomBar) {
Button("Bottom Bar", action: {})
}
}
}
.overlay(
VStack {
Spacer()
Text("Bottom Text")
}
)
}
Original answer:
Remove the ignoresSafeArea. The bottom safe area includes the toolbar, so by ignoring it you’re telling Swiftui to put the content behind the toolbar.