Presenting Full Screen Cover

A full screen cover presents a modal view on top of the current content that covers as much of the screen as possible. There are two ways to present a full screen cover:

1. Using a State variable of type Bool. When the Binding Boolean value is set to true, the full screen cover will be presented. When the Binding Boolean is set to false, the full screen cover will be dismissed.

2. Using a State variable with an Optional type that conforms to Identifiable. When the Binding value is non-nil, the full screen cover will be presented. When the Binding value is set to nil, the full screen cover will be dismissed.

Using a Binding Boolean

In the example below, the showingFullScreenCover Boolean State variable is being set to true to present the full screen cover.

struct ContentView: View {

    @State private var showingFullScreenCover = false
  
    var body: some View {
        Button("Show Full Screen Cover") {
            showingFullScreenCover.toggle()
        }
        .fullScreenCover(isPresented: $showingFullScreenCover) {
            FullScreenCoverView()
        }
    }
}

Using a Binding Optional value

In the example below, the selectedPerson Boolean Optional value is being set to a non-nil value to present the full screen cover. The full screen cover's content closure allows you to access an unwrapped Person value to be passed into the PersonIntroductionView.

@State private var selectedPerson: Person

VStack {
    Button("Show Person") {
        selectedPerson = person
    }
}
.fullScreenCover(item: $selectedPerson) { person in
    PersonIntroductionView(person: person)
}

Dismissing Full Screen Cover

To dismiss the full screen cover from a separate view, you can use the dismiss environment value. First, create a variable for the dismiss environment value, then simply call dismiss() to dismiss the full screen cover.

@Environment(\.dismiss) private var dismiss

Button("Dismiss", systemImage: "xmark") {
    dismiss()
}

On Dismiss

You can execute code when the full screen cover is dismissed by supplying the full screen cover modifier with the on dismiss closure.

.fullScreenCover(isPresented: $showingFullScreenCover) {
    print("See you next time!")
} content: {
    FullScreenCoverView()
}

.fullScreenCover(item: $selectedPerson) {
    print("See you next time!")
} content: { person in
    PersonIntroductionView(person: person)
}