How can I make a bottom sheet appear behind a tabView? - swiftui

Question

Does anyone know how I can create a bottom sheet similar to the one in the Diary Queen app. I have tried a few times but every thing I've tried has made the bottom sheet appear above the bottom tabview. I need it to appear from behind the tabview just like in the screenshots.
I've tried a zstack, but every time my bottom view appears above.
import SwiftUI
struct Menu: View {
#State private var showingBottomSheet = true
var body: some View {
TabView{
orderView()
.tabItem{
Image(systemName: "questionmark")
Text("Order")
}
rewardView()
.tabItem{
Image(systemName: "star")
Text("Rewards")
}
dealsView()
.tabItem{
Image(systemName: "tag")
Text("Deals")
}
myDQView()
.tabItem{
Image(systemName: "person")
Text("My DQ")
}
currentOrderView()
.tabItem{
Image(systemName: "bag")
}
}
.padding()
.sheet(isPresented: $showingBottomSheet) {
Text("hello")
//
}
}
}
struct Menu_Previews: PreviewProvider {
static var previews: some View {
Menu()
}
}

Answer 1

The solution to this, is to not use a .sheet, instead you need to have a view that is built and .offset(y:...) off the screen, and have it watch for your boolean value to change. For example:
struct Menu: View {
#State private var showingBottomSheet = false
var body: some View {
TabView{
Group {
ScrollView{}
.tabItem{
Image(systemName: "questionmark")
Text("Order")
}
Text("")
.tabItem{
Image(systemName: "star")
Text("Rewards")
}
Text("")
.tabItem{
Image(systemName: "tag")
Text("Deals")
}
Text("")
.tabItem{
Image(systemName: "person")
Text("My DQ")
}
Text("")
.tabItem{
Image(systemName: "bag")
}
}
.background(
Color.gray.offset(y: showingBottomSheet ? 0 : UIScreen.main.bounds.size.height - 120)
)
}
}
}
Notice that constructing it like this, puts it behind your view. Also in this example, I set the height - 120 soley so if you copied this, you'll see that the offset is indeed behind the other view. I was also forced to use a ScrollView and replace all the other views with Text because you didn't post those views, the principle should still remain the same.

Answer 2

In the order view, create #state variable and using if statement to display the custom view as a sheet
struct Order: View {
#State var isShow: Bool = true
var body: some View {
ZStack(alignment: .bottom) {
VStack {
Button("Display Sheet") {
isShow.toggle()
}
Spacer()
}
if isShow {
RoundedRectangle(cornerRadius: 20)
.fill(Color.gray.opacity(0.2))
.frame(height: UIScreen.main.bounds.height * 0.8)
.transition(.push(from: .bottom))
.animation(.easeInOut(duration: 1))
}
}
}
}