swiftui

Hide chevron/arrow on NavigationLink when displaying a view, SwiftUI


I am trying to remove the chevron that appears on the right of the screen with a navigationLink that contains a view. This is my code below:

        NavigationView {
        List {
             NavigationLink(destination: DynamicList()) {
                  ResultCard()
             }
      ...
      }

Other answers on Stack Overflow have recommended using something like the below:

NavigationLink(...)
   .opacity(0)

However, this doesn't work in my case since bringing the opacity down to 0 also removes the view that I am trying to display. This is also the case with '.hidden'. I've searched everywhere and the only somewhat working solution I could find was to alter the padding in order to 'push' the chevron off of the side, but this is a poor solution since the 'ResultCard' view will appear wonky/off-centre on different display sizes.

Perhaps it isn't possible to remove the chevron - and if this is the case, is there any other way I can allow the user to tap the 'ResultCard' view and be taken to a new page, that isn't through a navigation link?

I'm banging my head on the wall so any ideas are very much appreciated.


Solution

  • You can use an .overlay on your label view with a NavigationLink with an EmptyView() set as its label:

    
    struct ContentView : View {
        var body: some View {
            NavigationView {
                List {
                    NavigationLink("Link 1", destination: Text("Hi"))
                    Text("Test")
                        .overlay(NavigationLink(destination: Text("Test"), label: {
                            EmptyView()
                        }))
                }
            }
        }
    }
    
    

    Example of overlay navigation

    Update: Another solution, which seems to work with other types of Views besides Text:

    struct ContentView : View {
        @State private var linkActive = false
        
        var body: some View {
            NavigationView {
                List {
                    NavigationLink("Link 1", destination: Text("Hi"))
                    Button(action: { linkActive = true }) {
                        Image(systemName: "pencil")
                    }.overlay(VStack {
                        if linkActive {
                            NavigationLink(destination: Text("Test"), isActive: $linkActive) {
                                EmptyView()
                            }.opacity(0)
                        }
                    })
                }
            }
        }
    }