Add NavigationLink to Custom designed button in Swift UI

Question

I am trying to add NavigationLink inside NavigationView in which there is a custom designed button. I want to navigate on that button tap but NavigationLink code gives compilation error. it requires localisedTitle which I don't want to display and also tried to give Custom button in place of label but not working. Any help would be appreciated

Here is my code! I am using Xcode 13.3.1

    @State private var isShowingSignupView = false
    
    var body: some View {
        NavigationView {
            VStack {
                Spacer()
                VStack(alignment: .center, spacing: 12) {
                    AppTextField(Constants.Email, text: $email)
                    
                    AppTextField(Constants.Password, text: $password, isSecure: $isSecure, leftImage: "lock",rightImage: Image(systemName: "eye.fill"), rightSelectedImage: Image(systemName: "eye.slash.fill"))
                    
                    AppButtonText(title: Constants.ForgotPassword) {
                        debugPrint("Forgot Password tapped")
                    }
                    .frame(maxWidth: .infinity, maxHeight: 20, alignment: .trailing)
                    
                    AppButton(title: Constants.Login) {
                    }
                }
                Spacer()
                
                NavigationLink($isShowingSignupView, destination: Signup) {
                    AppButtonText(title: Constants.SignUp) {
                        isShowingSignupView = true
                    }
                }
            }
            .padding()
        }
        .navigationTitle("Login")
    }

**ERROR:-

1. Cannot convert value of type 'Signup.Type' to expected argument type '() -> Destination'
2. Generic parameter 'Destination' could not be inferred**

**I have also tried after replacing this **

NavigationLink(destination: Signup()) {
                    AppButtonText(title: Constants.SignUp) {
                        isShowingSignupView = true
                    }
                }

Which just removed error but does not navigate on new screen

Answer 1

Hey there! I got the issue and sollution to it. Actually above code was almost correct but the problem was in Custom Button view action which was not getting triggered due to simultaneousGesture added in it for functionality

struct AppButtonText: View {
    
    var title: String
    @State var action: () -> ()
    
    @State private var isPressed = false
    
    var body: some View {
        Text(title)
            .foregroundColor(isPressed ? Color.red.opacity(0.5) : Color.red)
            .background(Color.clear)
            .padding(.vertical, 0)
            .font(.body)
            .simultaneousGesture(
                DragGesture(minimumDistance: 0)
                    .onChanged({ _ in
                        isPressed = true
                    })
                    .onEnded({ _ in
                        isPressed = false
                        action() `THIS LINE WAS NOT ADDED BEFORE`
                        
                    })
            )
    }
}

And this below line was having no issue

NavigationLink($isShowingSignupView, destination: Signup) {
     AppButtonText(title: Constants.SignUp) {
         isShowingSignupView = true
     }
}

THANKS ALL FOR YOUR VALUABLE REPLIES

Answer 2

You need to use NavigationLink(destination: { Signup() })

Also since you are using custom Button instead of NavigationLink it's better use isActive property:

NavigationLink("Signup", isActive: $isShowingSignupView) { 
   Signup()
}
AppButtonText(title: Constants.SignUp) {
   isShowingSignupView = true
}

Answer 3

You can just do it like this. Note that you need to initialize when using a view struct, like Signup().

@State private var isShowingSignupView = false

struct Signup: View {
    var body: some View {
        Text("Your view contents here")
    }
}

var signup: some View {
    Text("Your view contents here")
}

var body: some View {
    NavigationView {
        VStack {
            // Using a view
            NavigationLink(isActive: $isShowingSignupView) {
                signup
            } label: {
                AppButtonText(title: Constants.SignUp) {
                    isShowingSignupView = true
                }
            }
            // Using a view struct
            NavigationLink(isActive: $isShowingSignupView) {
                Signup()
            } label: {
                AppButtonText(title: Constants.SignUp) {
                    isShowingSignupView = true
                }
            }
        }
    }
}