Bottom Sheet hide the toolbar bottom icons

I want to apply bottom sheet like an image posted below.

But when I applied it, it hide my bottom toolbar items.

Using SWIFTUI I did not seen any solution like it.

Kindly solve it ASAP.

Accepted Reply

"Kindly solve it ASAP." We'll help you to solve it if you can provide some code that we can look at. (But we won't do it "ASAP" as that's a bit rude.)

Replies

"Kindly solve it ASAP." We'll help you to solve it if you can provide some code that we can look at. (But we won't do it "ASAP" as that's a bit rude.)

@darkpaw Thanks for feedback, basically I want to separate my bottom toolbar with bottom sheet function(like describe in the 1st image) , but when I applied .toolbar{} with .sheet() function the result came like 2nd image. The bottom sheet come in front of toolbar button icons.

Here is my code:

   
    var body: some View {
        NavigationView{
            ZStack() {
               .toolbar {
                   
**# MY BOTTOM TOOL BAR IS HERE **
                    ToolbarItem(placement:.bottomBar)
                    {
                        HStack(spacing:11){

 Button{}label: {
VStack
{ 
Image(icon: .home_g)
                                        .renderingMode(.template)
                                        .resizable()
                                        .frame(width: 30, height: 30)
 Text("Home")  

}
.frame(width: 65, height:  65)
.cornerRadius(25)

                            }    }  }
                
  GeometryReader{
              geo in
                
        MapView(mapType: .standard,showsUserLocation: true)
                    
                       
                
**# 
# MY BOTTOM SHEET IS HERE **
                        .sheet(isPresented: $shopListVM.showSheet) {
                                                   ZStack{
                                                       if #available(iOS 16, *) {
                                                           VStack{
                                                              Text("SHEET IS OPEN")
                                                           }




                                                           .presentationDetents([.medium, .fraction(0.1)])

                                                         }
                                                               else {
                                                             VStack{
                                                                 Text("SHEET IS OPEN")
                                                             }
                                                         }
                                                   }




                                                           }
                    
                    VStack(spacing:20){
                        
                       
                            VStack{
                                HStack{
                                    Image(systemName: "magnifyingglass")
                                    TextField("Search..",text: $searchText)
      }
                           
       .padding()
                                    
       .background(Color.white)
        .cornerRadius(20)
        .padding(.top,30)
         .padding(.horizontal,30)
                            }

                      
                    
                       
                    }
                       
                
                       
                    
            
   
                }
         
            }
            .accentColor(Color(hex: 0xFA6109))
         
        }
    }
}

  • Did you ever find out how to make the sheet be above the toolbar so that the toolbar is always visible? I have the same issue.

Add a Comment

Can't debug this without all the code. Missing MapView... $searchText etc.

Also, can you please format your code correctly? When you add some code, use the Code Block and paste your code using the "Edit" menu's "Paste and Match Style" option.