How can I implement a bottom sheet above a tabbar in swiftUI?

Question

I'm working on an iOS app, and I'd like to implement a bottom sheet that appears above the TabBar.

I would like to get the appearance as in the image.

I appreciate any guidance on how to achieve this user interface behavior. Thank you!

I've explored various SwiftUI layouts and gestures, but I'm unsure how to make the bottom sheet overlap the TabBar.

When trying to call:

struct ContentView: View {
@State private var isBottomSheetPresented = false

var body: some View {
    TabView {
    // ...
    }
    .sheet(isPresented: $isBottomSheetPresented) {
        //....
    }
}

still the sheet overlaps the tabbar, it's above it.

Remount

You can clearly see that the sheet is showing over the mapview and not the tabview so add it over that. – Praxis

Similar was also asked here: #74858096 and here: #75533364 – Kieger

Answer 1

What I did was use this. From there just create your tab bar as normal and you can add pretty much what ever you want. Just make sure the hierarchy is correct.

import SwiftUI
import BottomSheet

struct ContentView: View{
    
    @State var bottomSheetPosition: BottomSheetPosition = .absolute(325)
    
    var body: some View{
        
        TabView{
            ZoneView()
                .bottomSheet(bottomSheetPosition: self.$bottomSheetPosition, switchablePositions: [
                                .relative(0.200),
                                .relative(0.4),
                                .relativeTop(0.95)
                            ], title: "Zone") {
                                
                            }
                          
                .tabItem{
                    Image(systemName: "heart.fill")
                    Text("Heart")
                }
                .toolbarBackground(.visible, for: .tabBar)
              
                
            Test()
                .bottomSheet(
                    bottomSheetPosition: $bottomSheetPosition,
                    switchablePositions: [.absolute(150),
                                          .absolute(325), .relative(0.95)],
                    headerContent: {
                        Text("Header Content")
                    },
                    mainContent: {
                        Text("Main Content")
                    }
                )
                .tabItem{
                    Image(systemName: "gearshape.fill")
                    Text("Settings")
                }
                .toolbarBackground(.visible, for: .tabBar)
        }
        
        
    }
}

#Preview{
    ContentView()
}

If you want to add an entire page into your bottom sheet instead of coding everything in the ContentView, do something like this:

import SwiftUI
import BottomSheet

struct ContentView: View{
    
    @State var bottomSheetPosition: BottomSheetPosition = .absolute(325)
    
    var body: some View{
        
        TabView{
            ZoneView()
                .bottomSheet(bottomSheetPosition: self.$bottomSheetPosition, switchablePositions: [
                                .relative(0.200),
                                .relative(0.4),
                                .relativeTop(0.95)
                            ] ) {
                                ZoneView()
                            }
                            .customBackground(
                                Color.white
                                                .cornerRadius(20)
                                                
                                        )
                          
                .tabItem{
                    Image(systemName: "heart.fill")
                    Text("Heart")
                }
                .toolbarBackground(.visible, for: .tabBar)
              
                
            Test()
                .bottomSheet(
                    bottomSheetPosition: $bottomSheetPosition,
                    switchablePositions: [.absolute(150),
                                          .absolute(325), .relative(0.95)],
                    headerContent: {
                        Text("Header Content")
                    },
                    mainContent: {
                        Text("Main Content")
                    }
                )
                .tabItem{
                    Image(systemName: "gearshape.fill")
                    Text("Settings")
                }
                .toolbarBackground(.visible, for: .tabBar)
        }
        
        
    }
}

#Preview{
    ContentView()
}

You can even mess around with it to have two bottom sheets my having .bottomSheet in one file and then calling it with a .bottomSheet in ContentView:

Uninhibited