Ahtazaz
Ahtazaz

Reputation: 885

Show custom popup view on top of view Hierarchy ~ SwiftUI

As custom Popup view is showing perfectly But navigation view back button is also enable while showing popup view. So, Is it possible to show custom popup view on top of view hierarchy like we normally do in swift like this

 guard let window : UIWindow = UIApplication.shared.windows.filter({$0.isKeyWindow}).first else {return}
        var presentVC = window.rootViewController
        while let next = presentVC?.presentedViewController {
            presentVC = next
        }

Source Code:

struct LogInView: View {

@State private var email: String = ""
@State private var isShowPopup: Bool = false
@Binding var showSelfView: Bool

var body: some View {
    
    ZStack {
        VStack(alignment: .leading, spacing: 30) {
            
            // Top
            VStack(alignment: .leading, spacing: 10) {
                Text("Login")
                    .font(.title).bold()
                    .foregroundColor(Design.Theme.PrimaryTextColor)
                
                Text("Please enter your password to log in to your VaultsPay account")
                    .font(.headline)
                    .fontWeight(.regular)
                    .foregroundColor(Design.Theme.SecondaryTextColor)
            }
            
            // TextFields
            VStack(spacing: 15) {
                TextField("Email", text: $email)
                    .keyboardType(.emailAddress)
                    .textFieldStyle(.plain)
                    .padding(.horizontal, 12)
                    .frame(height: 55)
                    .background(
                        Design.Theme.TextFieldBackgroundColor.cornerRadius(15)
                    )
                
                TextField("Password", text: $email)
                    .keyboardType(.emailAddress)
                    .textFieldStyle(.plain)
                    .frame(height: 55)
                    .padding(.horizontal, 12)
                    .background(
                        Design.Theme.TextFieldBackgroundColor.cornerRadius(15)
                    )
            }
            
            Button(action: {
                withAnimation {
                    self.isShowPopup.toggle()
                }
            }) {
                Text("Login")
                    .font(.title3).bold()
                    .foregroundColor(Design.Theme.WhiteTextColor)
                    .frame(height: 55)
                    .frame(maxWidth: .infinity)
                    .background(Design.Theme.SecondaryBackgroundColor)
                    .cornerRadius(15)
                    .opacity(0.4)
            }
            
            
            HStack(alignment: .center) {
                Button(action: {
                    self.showSelfView = false
                }) {
                    Text("Forgot Password?")
                        .font(.headline).bold()
                        .foregroundColor(Design.Theme.TertiaryTextColor)
                        .frame(width: 200, height: 25)
                }
                .frame(maxWidth: .infinity)
            }
            
            Spacer()
            
        } //: Main VSTACK
        .padding(.horizontal)
        .navigationBarTitleDisplayMode(.inline)
        .toolbar {
            ToolbarItem(placement: .principal) {
                Image(Design.Icon.AppLogo)
                    .scaledToFit()
            }
        }
        
        if self.isShowPopup {
            GeometryReader { _ in
                ConfirmationDialog()
                    .frame(maxWidth: .infinity, maxHeight: .infinity)
                    .padding(.horizontal, 35)
            }
            .background(
                Color.black.opacity(0.65)
                    .edgesIgnoringSafeArea(.all)
                    .onTapGesture {
                        withAnimation {
                            self.isShowPopup.toggle()
                        }
                    }
            )
        }
        
    }
    
}

Source code to handle custom Popup view:

if self.isShowPopup {
            GeometryReader { _ in
                ConfirmationDialog()
                    .frame(maxWidth: .infinity, maxHeight: .infinity)
                    .padding(.horizontal, 35)
            }
            .background(
                Color.black.opacity(0.65)
                    .edgesIgnoringSafeArea(.all)
                    .onTapGesture {
                        withAnimation {
                            self.isShowPopup.toggle()
                        }
                    }
            )
        }

Problem Screenshot:

Problem Screenshot

Thanks in advance. Looking forward to your help.

Upvotes: 2

Views: 6662

Answers (2)

user1664018
user1664018

Reputation: 81

I know this is an old question but searched so much for implementing popup in swift ui and every thing I found had issues whether it was navigation bar, back button size of the screen Until I found the following link. https://johncodeos.com/how-to-create-a-popup-window-with-swiftui/

In simple Create a popup view and show and hide it based on a Binding var. Call this Popup view in ZStack like the following - So Happy to find this!!! Hope it will help other too!!!

    struct ComtentView: View {
        @State var selection: Bool = false
    var body: some View {
        ZStack{
                NavigationView {
                ...... your custom code
                      Button {
                                
                                print("button is tapped")
                                self.selection = true
                }
                Popupview (show: $selection)
         }
    }
    }
    
struct PopupView: View {
    @Binding var show:Bool
.... your custom code
}

Upvotes: 1

HunterLion
HunterLion

Reputation: 4006

At the bottom of the VStack, add the modifier .navigationBarBackButtonHidden().

        ...

                    } //: Main VSTACK
                    .padding(.horizontal)
                    .navigationBarBackButtonHidden(isShowPopup)  // <- Here
                    .navigationBarTitleDisplayMode(.inline)
                    .toolbar {

        ...

Upvotes: 1

Related Questions