Search code examples
xcodeswiftuitabbarbottom-sheetxcode15

Bottom Sheet Above Tab Bar like Find My app


How would you make the .sheet presented above the tab bar wihtout covering it in SwiftUi? I've seen a somewhat solution but not one in SwiftUi. enter image description here

So far anything I try just places the sheet overlaying the tab bar

import SwiftUI

struct ContentView: View {
    @State private var showSheet = true

    var body: some View {
        TabView {
            HomeView(showSheet: $showSheet)
                .tabItem {
                    Label("Home", systemImage: "house")
                }
            Text("Second Tab")
                .tabItem {
                    Label("Second", systemImage: "2.circle")
                }
        }
    }
}

struct HomeView: View {
    @Binding var showSheet: Bool

    var body: some View {
        VStack {
            Button("Show TabView Sheet") {
                showSheet.toggle()
            }
            .sheet(isPresented: $showSheet) {
                SheetContent()
                    .presentationDetents([.medium, .large])
                    .interactiveDismissDisabled()
                    .presentationBackgroundInteraction(.enabled(upThrough: .large))
            }
        }
    }
}

struct SheetContent: View {
    var body: some View {
        VStack {
            Text("First Tab Content")
            Text("More Content in the Sheet")
            // Add more content here as needed
        }
    }
}

#Preview {
    ContentView()
}


Solution

  • While both methods below from Benzy Neez and myself are valid, you may still run into issues when trying to edit the content on the actual overlay size the height is constantly resizing. Best is to use this and follow my detailed explanation in this post: https://stackoverflow.com/a/78686848/16810909

    enter image description here