Designing Bottom Sheets in iOS Using SwiftUI

Creating bottom sheets in iOS using SwiftUI has become significantly easier with the introduction of new APIs in recent iOS versions. Bottom sheets are an essential UI component for presenting contextual information or actions without navigating away from the current view. In this guide, we will explore how to design and implement bottom sheets in SwiftUI efficiently, along with some best practices and customization options.

Why Use Bottom Sheets in iOS Apps?

Bottom sheets are widely used in modern mobile design patterns, providing a sleek and user-friendly way to display additional content. They help maintain context, reduce user confusion, and are perfect for tasks like sharing content, editing settings, or displaying additional details.

With SwiftUI, you can create bottom sheets in a declarative manner using the .sheet() modifier. Since iOS 16, Apple has enhanced the bottom sheet experience with new presentationDetents, allowing developers to define multiple levels like .medium, .large, or custom heights.

Basic Example of a Bottom Sheet in SwiftUI

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

    var body: some View {
        Button("Show Bottom Sheet") {
            showSheet.toggle()
        }
        .sheet(isPresented: $showSheet) {
            BottomSheetView()
                .presentationDetents([.medium, .large])
        }
    }
}

struct BottomSheetView: View {
    var body: some View {
        VStack {
            Text("This is a Bottom Sheet")
                .font(.headline)
            Spacer()
        }
        .padding()
    }
}

This example shows a simple bottom sheet that appears when the button is tapped. The .presentationDetents() modifier allows you to specify the size(s) of the sheet.

Customization Options

SwiftUI offers various customization options for bottom sheets:

• presentationDetents: Control the sheet height.
• presentationDragIndicator: Show or hide the drag indicator.
• interactiveDismissDisabled(): Prevent users from swiping to dismiss.
• onDismiss: Handle actions when the sheet is closed.

These improvements give developers more control and flexibility over the sheet’s behavior and appearance.

Best Practices for Bottom Sheet Design

• Use medium height for quick actions and large for detailed forms or lists.
• Avoid cramming too much content into small sheets.
• Include drag indicators for better UX cues.
• Disable interactive dismiss when the user must complete an action before closing.

SwiftUI vs UIKit for Bottom Sheets

While UIKit offers more flexibility for complex customizations, SwiftUI is ideal for rapid development and cleaner codebases.

Additional Resources

For more details and examples, check the official Apple documentation on sheets in SwiftUI.