Home > Mobile >  Add NavigationLink to Custom designed button in Swift UI
Add NavigationLink to Custom designed button in Swift UI

Time:11-29

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

CodePudding user response:

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
}

CodePudding user response:

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
                }
            }
        }
    }
}
  • Related