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.
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()
}))
}
}
}
}
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)
}
})
}
}
}
}