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
Post a Comment