4

how can i present a modal that will take up the fullscreen and can't be dismissed by swiping it down? Currently I am using .sheet on a view to present a modal that is dismissible.

I haven't noticed any beta changes in Xcode that changes this behavior.

Any help would be appreciated :)

SwiftiSwift
  • 7,528
  • 9
  • 56
  • 96
  • 1
    Possibly a duplicate of https://stackoverflow.com/questions/56756318/swiftui-presentationbutton-with-modal-that-is-full-screen – rmaddy Sep 20 '19 at 07:01
  • @maddy they're using UIViewControllers. I want to purely use Views – SwiftiSwift Sep 20 '19 at 07:05
  • It's possible to disable dismiss see here: https://stackoverflow.com/questions/57398353/is-it-possible-to-make-a-modal-non-dismissible-in-swiftui/57399626#57399626 But Modal is not meant to be full screen. Maybe you need to present your next view in a different way. – LuLuGaGa Sep 20 '19 at 07:19
  • 1
    @LuLuGaGa i just want the view to be presented fullscreen – SwiftiSwift Sep 20 '19 at 21:25

1 Answers1

17

SwiftUI 1.0

I'm not sure if this what you'd want to go with but it's possible to create your own modal screen by using the ZStack and a state variable to control the hiding/showing of it.

Code

struct CustomModalPopups: View {
    @State private var showingModal = false
    
    var body: some View {
        ZStack {
            VStack(spacing: 20) {
                Text("Custom Popup").font(.largeTitle)
                
                Text("Introduction").font(.title).foregroundColor(.gray)
                
                Text("You can create your own modal popup with the use of a ZStack and a State variable.")
                    .frame(maxWidth: .infinity)
                    .padding().font(.title).layoutPriority(1)
                    .background(Color.orange).foregroundColor(Color.white)
                
                Button(action: {
                    self.showingModal = true
                }) {
                    Text("Show popup")
                }
                Spacer()
            }
            
            // The Custom Popup is on top of the screen
            if $showingModal.wrappedValue {
                // But it will not show unless this variable is true
                ZStack {
                    Color.black.opacity(0.4)
                        .edgesIgnoringSafeArea(.vertical)
                    // This VStack is the popup
                    VStack(spacing: 20) {
                        Text("Popup")
                            .bold().padding()
                            .frame(maxWidth: .infinity)
                            .background(Color.orange)
                            .foregroundColor(Color.white)
                        Spacer()
                        Button(action: {
                            self.showingModal = false
                        }) {
                            Text("Close")
                        }.padding()
                    }
                    .frame(width: 300, height: 200)
                    .background(Color.white)
                    .cornerRadius(20).shadow(radius: 20)
                }
            }
        }
    }
}

Example

(Excerpt from "SwiftUI Views" book) SwiftUI Views Book Excerpt So here, your popup is small, but you can adjust the dimensions to make it fullscreen with the frame modifier that is on that VStack.

Community
  • 1
  • 1
Mark Moeykens
  • 15,915
  • 6
  • 63
  • 62
  • That's not ideal to always use zstacks. For example if you erase on the new view UserDefaults.standard and the oldview behind depends on it, the app will crash. – SwiftiSwift Sep 21 '19 at 07:38
  • 1
    Yeah, this was all I could think of at this time for your problem. I'll keep a lookout for other options. – Mark Moeykens Sep 21 '19 at 08:08
  • Black transparent overlay doesn't overlap with navigation bar. It appears under navigation bar – Gaurav Borole Aug 03 '21 at 10:10