PlainButtonStyle on NavigationLink disables link

I'm attempting to add a NavigationLink that overlays my view content. I'm able to do this using either overlay or a ZStack. However, I want it to be invisible. When I try to add .buttonStyle(PlainButtonStyle()) to the NavigationLink it no longer works.

The overlay implementation:

VStack(alignment: .trailing, spacing: 0){
     // View content
    }.minimumScaleFactor(0.5)
     .overlay(GeometryReader { geometry in
         // Link to control
         NavigationLink(destination: ControlView()) {
           EmptyView()
         }.buttonStyle(PlainButtonStyle())
          .frame(width: geometry.size.width, 
                      height: geometry.size.height, 
                      alignment: .center)
          .border(.black, width: 1)
    })

The ZStack implementation:

ZStack(alignment: .center) {
    VStack(alignment: .trailing, spacing: 0){
      // View content
    }.minimumScaleFactor(0.5)
     
    // Link to control
    GeometryReader { geometry in
      ZStack(alignment: .center) {
         NavigationLink(destination: ControlView()) {
           EmptyView()
         }.buttonStyle(PlainButtonStyle())
          .frame(width: geometry.size.width * 0.5, 
                      height: geometry.size.height * 0.5, 
                      alignment: .center)
          .border(.red width: 1)
      }.frame(width: geometry.size.width, 
                   height: geometry.size.height, 
                   alignment: .center)
       .border(.black, width: 1)
  }
}

The main thing I am trying to remove is the button overlay that causes a circle / oval over my view. Is there something else that can be done to remove this?

Answered by Frameworks Engineer in 721474022

Can I understand a little bit more about what you are trying to accomplish here? I would avoid trying to create a NavigationLink with EmptyView() as the label of the link. Are you trying to create content where the entirety of the content is tappable as a NavigationLink? If so, I'd recommend putting the content of the view that you want to be tappable into the NavigationLink as the label, and then specify plain button style around that navigation link.

Separately, I have a sense that based on your sample code, you might actually want something more like programmatic navigation. So, I'd strongly recommend checking out the developer talk this year about the new NavigationStack, .navigationDestinations and path APIs.

https://developer.apple.com/videos/play/wwdc2022/10054/

Accepted Answer

Can I understand a little bit more about what you are trying to accomplish here? I would avoid trying to create a NavigationLink with EmptyView() as the label of the link. Are you trying to create content where the entirety of the content is tappable as a NavigationLink? If so, I'd recommend putting the content of the view that you want to be tappable into the NavigationLink as the label, and then specify plain button style around that navigation link.

Separately, I have a sense that based on your sample code, you might actually want something more like programmatic navigation. So, I'd strongly recommend checking out the developer talk this year about the new NavigationStack, .navigationDestinations and path APIs.

https://developer.apple.com/videos/play/wwdc2022/10054/

PlainButtonStyle on NavigationLink disables link
 
 
Q