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

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()
    }
}

Urita

k.arias, did you ever get a solution to this problem? I would love to know, as I have the same issue... LOL – Offside

@k.arias, I need to show it in in front of tab bar, means tab bar should be behind the sheet, but screen should be visible – Calorific

Answer 1

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))

        }
    }
}

}

Azoic

Answer 2

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.

Macdonald