New in SwiftUI 4: Resizable Bottom Sheet

Photo by Bruno Croci on Unsplash

In WWDC 22, Apple introduced resizable bottom sheet for SwiftUI 4 with a newly introduced modifier called presentationDetents.

Prior iOS 16, expandable bottom sheet was done by porting over UISheetPresentationContoller from UIKit to SwiftUI but now with presentationDetents bottom sheet is natively supported.

presentationDetents modifier accepts a collection of detents for sheet and we use this new modifier by simply adding it inside the sheet view.

Let’s take an example, for our example we will set the detent to .medium which will shows a bottom sheet that will take up half of the screen.

struct ContentView: View {
    @State private var presentSheet = false
    
    var body: some View {
        VStack {
            Text("DevTechie!")
                .font(.largeTitle)
                .foregroundColor(.primary)
            Button("Show Sheet") {
                presentSheet.toggle()
            }
            .buttonStyle(.borderedProminent)
            .sheet(isPresented: $presentSheet) {
                Text("This is a bottom sheet")
                    .presentationDetents([.medium])
            }
            
        }
        .padding()
    }
}