Presentation Background - This is the darker area that prevents the user from interacting with the view while the sheet is showing.

Presentation - The view being presented. A sheet in this example.

What is presentationBackgroundInteraction?

The presentationBackgroundInteraction is a modifier in SwiftUI that controls whether people can interact with the view behind a presentation:

• automatic: The default background interaction for the presentation. (In iOS, this is usually disabled.)

• disabled: Users can not interact with the view behind a presentation.

• enabled: Users can interact with the view behind a presentation.

• enabled(upThrough: PresentationDetent): Users can interact with the view behind a presentation up through a specified detent.

How to Use presentationBackgroundInteraction?

Here is an example of how you can use presentationBackgroundInteraction in your SwiftUI code:

Swift

struct WhatIsPresentationBackgroundInteractionInSwiftUI: View {
    @State private var number1 = 5
    @State private var number2 = 10
    @State private var total = 15
    @State private var showSettings = false
    
    var body: some View {
        Form {
            Stepper("\(number1)", value: $number1)
            Stepper("\(number2)", value: $number2)

            Button("Present Total") {
                total = number1 + number2
                showSettings = true
            }
            .frame(maxWidth: .infinity)
        }
        .font(.title)
        .buttonStyle(.borderedProminent)
        .sheet(isPresented: $showSettings) {
            Form {
                Section("Summary") {
                    LabeledContent("Total", value: total, format: .number)
                }
            }
            .headerProminence(.increased)
            .presentationDetents([.height(140), .medium, .large])
            .presentationBackgroundInteraction(.enabled(upThrough: .height(140)))
        }
    }
}

In this example, users can interact with the view behind the sheet when the sheet is at the smallest detent (height of 140), but not at the other detents.

The upThrough parameter is what disables interaction once it goes above 140.

💡Tip

Ensure your custom presentation detent height (140 in the example) matches the height specified in the presentationBackgroundInteraction.

When presentationBackgroundInteraction is disabled (default)

Normally, the background is grayed out.

With presentationBackgroundInteraction enabled

Here, you can see it is now active and buttons can be tapped while the sheet is present.

With presentationBackgroundInteraction enabled, but sheet pulled up

The user can no longer interact with the controls now that the sheet is higher than 140.

Use-Case Scenarios

• Scenario 1: If you have a sheet that covers part of the screen and you want the user to be able to interact with the underlying view, you can use presentationBackgroundInteraction(.enabled).

• Scenario 2: If you want to disable interaction with the view behind a full-screen modal, you can use .presentationBackgroundInteraction(.disabled). Although this is the default, you could use it to switch states from enabled to disabled.

• Scenario 3: If you want to enable interaction up to a certain point (detent), you can use .presentationBackgroundInteraction(.enabled(upThrough: .height(140))).

🌟 Special Offer: SwiftUI Enthusiasts to Save 11%! 🌟

As a thank you for reading our blog, we're thrilled to offer you an exclusive 11% discount on all our SwiftUI books!

📚 Use coupon code POSTS_11 at checkout or just click this link bigmountainstudio.com to claim your discount.

(Note: Coupons cannot be used during sales.)

Your Learning Path Quick Links (Save 11%)

1. Create UI with SwiftUI Views Mastery (beginner)

2. Architect your app using SwiftUI Essentials (beginner)

3. Improve your app's UX with SwiftUI Animations Mastery (junior)

4. Save & sync your app's data with Core Data Mastery -or- SwiftData Mastery (junior) 

5. React to and manipulate data using Combine Mastery in SwiftUI (advanced)