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: