I have a NavigationLink:
NavigationLink("Login") {
WelcomeView()
}.foregroundColor(.white).frame(width:300, height: 50).background(Color.blue).cornerRadius(10).padding().disabled(authenticateUser())
which looks like this:
The issue is that the navigation only occurs when the user taps directly on the word "Login". If the user taps anywhere on the blue area outside of the text – no navigation occurs and nothing happens.
How do I modify the NavigationLink so that the user can tap anywhere inside its frame to navigate to the linked in view?
>Solution :
Currently, you are styling the background of the NavigationLink, but only the text is clickable. Instead, make use of NavigationLink.init(destination: (), label: (). Here’s an example using what you did, but allowing the entire button to be clickable:
NavigationLink {
//Your destination here
WelcomeView()
} label: {
ZStack{
RoundedRectangle(cornerRadius: 10)
.foregroundColor(.blue)
Text("Login")
.foregroundColor(.white)
}
}.frame(width: 300, height: 50)
.padding().disabled(authenticateUser())
Also, somewhat off topic but I might have the disabled be based on the result of a ViewModel that you call at the start in an @Published variable – using .onAppear and checking then. That would make it so you could update it if necessary. Here’s a video of the behavior now:
