SwiftUI Sheet with ScrollView like in Apple Maps

I decided to write this article after answering a question at the Stackoverflow.

Let’s dive in with .sheet

SwiftUI’s built-in .sheet modifier allows us to present views as sheets, but by default, these sheets can only be dismissed interactively by dragging down from the top bezel. This behavior can be problematic when the sheet contains scrollable content, as the scroll view may consume the drag gesture instead of dismissing the sheet.

Fortunately, SwiftUI provides a way to customize the presentationDetentsand disable interactive dismissal for specific detents, allowing us to create a seamless experience for dismissible sheets with scrollable content.

Apple introduced the new presentationDetents modifier, allowing us to customize the size of sheets and enable interactive dismissal by dragging. However, there's an issue where scrolling to the top of the content inside the sheet disables the interactive dismissal gesture.

I'll explore a solution to this problem, allowing users to dismiss the sheet by dragging it down even when the scroll view is at the top.

Our code consists of three main components: ContentView, MySheetView, and ViewOffsetKey.

struct ContentView: View {
    @State private var isSheetPresented =…