How to Present a Full Screen Modal View in SwiftUI - Without Sheets UI

Full Screen Modal : With SwiftUI, you can present a modal view that takes the entire portion of the screen instead of the modal sheets that you see since iOS 13. In this article we will learn  a full screen modal without the sheets UI

Modal 

You will need to set a state for showing your modal view.

@State var showModal =  false

..

Add a modifier called fullScreenCover to your button (or wherever you're calling this modal from) and set the state as a Binding, with the dollar sign.

Text("Show Modal")
.fullScreenCover(isPresented: $showModal) {
		MyView()
}

..

Make sure to set your showModal state to true in order to present the modal.

struct ContentView: View {
    @State var showModal = false

    var body: some View {
        Button(action: { showModal = true }) {
            Text("My Button")
        }
        .fullScreenCover(isPresented: $showModal) {
            ModalView()
        }
    }
}

..

The full screen modal doesn't have the same swipe down to dismiss gesture. You'll need to manually set a dismiss modal behavior in your ModalView.

struct ModalView: View {
    @Environment(\.presentationMode) var presentationMode

    var body: some View {
        Text("Close Modal")
            .onTapGesture {
                presentationMode.wrappedValue.dismiss()
            }
    }
}

..

Comments