Search code examples
swiftuinavigationswiftui-navigationlink

How to navigate using button with condition check in SwiftUI


Since NavigationButton isn't available anymore, how do I check conditions in NavigationLink in order to navigate to another view?

NavigationLink(destination: Dashboard(userName: self.userId,
                                      password: self.password), isActive: $showDashboard) {
    Button(action: {
        if self.userId.isEmpty || self.password.isEmpty {
            self.isAlert = true
        } else {
            self.showDashboard = true
        }
                       
    }) {
        Text("Submit")
            .foregroundColor(.white)
            .font(.system(size: 22))
                       
        Dashboard()
    }
    .frame(minWidth: 150, idealWidth: 300, maxWidth: 450,
           minHeight: 30, idealHeight: 40, maxHeight: 50, alignment: .center)
    .background(Color(red: 81/255, green: 221/255, blue: 182/255))
                       
    .padding([.leading, .trailing], 20)
}

Edit:-

Also I want to show alert if length of userName and password is more then 16 and different alert if length is more than 10 and empty message alert if length is 0.


Solution

  • You can do something like this:

        NavigationView {
            VStack {
                NavigationLink(destination:  Dashboard(userName: self.userId, password: self.password), isActive: $showDashboard) {
                    Text("")
                }
                Button(action: {
                     if self.userId.isEmpty || self.password.isEmpty {
                          self.isAlert = true
                      } else {
                          self.showDashboard = true
                      }
                }) {
                    Text("Submit")
                        .foregroundColor(.green)
                        .font(.system(size: 22))
    
                }
            }
        }
    

    A thing to remember is that a NavigationLink is a button itself and when pressed it navigate to the destinationView, the isActive parameter is a way to force that to happen (without the user clicking the NavigationLink). As of now I'm not sure how to embed logic into NavigationLinks.

    Hope this helps :)

    EDIT:

    Another thing you can do is the following:

    NavigationLink(destination:Dashboard(userName: self.userId, password: self.password)) {
                        Text("Submit")
                    }.disabled(self.userId.isEmpty || self.password.isEmpty )
    

    This would disable the NavigationLink until both input fields are not empty.