SwiftUI — Getting rid of the NavigationLink disclosure arrow.

If you are like me, you are new to SwiftUI and constantly looking up solutions on Stack Overflow on how to solve some pretty basic problems. Recently, all I was trying to learn how to do was add a NavigationLink to an image. The image was in a list, and by defualt, the NavigationLink adds a trailing disclosure arrow (‘>’) to the end of its content. Here is how to get rid of it. Keep in mind that SwiftUI is still very new and lots of changes could be made. But this is at least a simple workaround for the time being.

1. Wrap your Image() in a ZStack

Suppose you have an image that, when tapped, will navigate to another screen. It may seem counter intuitive, but the navigation will not happen on the image itself, it will happen on an EmptyView that is placed on top of it. The EmptyView acts as an invisible view that will mask the disclosure arraw. In order to place the EmptyView on top of the Image, we will need to wrap the Image in a ZStack.

2. Use NavigationLink on EmptyView()

Once your image is inside of a ZStack, it is now ready to be masked with an EmptyView. An EmptyView is simply that, a view with no contents in it, and that allows for it to be invisiible, sitting on top of the Image.

If we were to place the Navigation Link on the Image itself, and without zooming in on the View, you should expect to see a trailing arrow on the image to let you know that it is acting as a link to another screen.

Placing the EmptyView at the bottom of the ZStack places it on top of the Image. The .buttonStyle(PlainButtonStyle()) is not necessary but I place it there for stylistic choice. It does not do anything to hide the trailing arrow, but it serves to let the user know that they have pressed a button when they click on it.