Disable swipe down to dismiss Sheet in SwiftUI

In this tutorial, we will see how to disable swipe down to dismiss sheet in SwiftUI.

The SwiftUI sheet view can be dismissed by swiping it down by default. So, if we want to prevent the dismissal of a sheet then we can use the interactiveDismissDisabled() modifier.

Syntex

.interactiveDismissDisabled()

We can disable the swipe-down gesture permanently with this modifier, or we can control it conditionally based on a boolean variable.

Disable swipe down to dismiss a sheet

We can use the interactiveDismissDisabled() modifier on a sheet view to prevent the default swipe-down gesture from dismissing a sheet.

This is useful when we want more control over the dismissal behavior, such as validating input or enforcing certain actions before dismissing the sheet.

Example

import SwiftUI

struct ContentView: View {
    @State private var sheetPresented = false
    
    var body: some View {
        Button("Show Sheet") {
            // When button tapped, show the sheet
            sheetPresented = true
        }
        .font(.title)
        
        // Creates a sheet when sheetPresented is true
        .sheet(isPresented: $sheetPresented) {
            VStack {
                // The content of the sheet goes here
                Text("Swipe Down")
            }
            .font(.title)
            .padding()
            
            // Disables swipe-down gesture to dismiss the sheet
            .interactiveDismissDisabled()
        }
    }
}

In the above program, I have created a @State variable to control whether the sheet is currently presented or not. When we tap the “Show Sheet” button, it will set this variable to true, triggering the presentation of the sheet.

The .sheet() modifier is used to present a sheet when sheetPresented is true. Inside the closure, we can put the content that will appear within the presented sheet.

Then I have applied the .interactiveDismissDisabled() modifier to the sheet, to prevent users from dismissing it by swiping it down.

Output:

prevent the default swipe-down gesture from dismissing a sheet

Conditional control of swipe-down gesture in Sheet

We can dynamically enable or disable the swipe-down gesture based on the toggle’s state by using a boolean variable and the interactiveDismissDisabled() modifier.

Here I will add a toggle switch, that will allow users to switch on or off the ability to close a sheet by swiping down. So, when users switch off it they will be able to dismiss the sheet by swiping it down. Otherwise, they will not be able to dismiss the sheet.

Example

import SwiftUI

struct ContentView: View {
    @State private var sheetPresented = false
    // Controls the dismissal behavior of the sheet
    @State private var isDisabled = true
    
    var body: some View {
        Button("Show Sheet") {
            sheetPresented = true // Sets isPresented to true when the button is tapped
        }
        .sheet(isPresented: $sheetPresented) {
            VStack {
                // A toggle switch to control the dismissal behavior
                Toggle("Prevent Disable", isOn: $isDisabled)
                    .padding()
                    // Conditionally disable swipe-down gesture based on the isDisabled state
                    .interactiveDismissDisabled(isDisabled)
            }
        }
    }
}

In the above program, a toggle control is used to change the value of isDisabled, controlling whether the swipe-down gesture is enabled or disabled for dismissing the sheet.

The interactiveDismissDisabled(isDisabled) modifier will conditionally disable the swipe-down gesture based on the value of isDisabled variable.

Output:

Conditional control of swipe-down gesture in Sheet

Leave a Reply

Your email address will not be published. Required fields are marked *