SwiftUI: Detecting selection change in NavigationView on tvOS - swift

Question

I am building a SwiftUI application for tvOS and am currently trying to implement UI. I have NavigationView at the bottom and label at the top and I want label to show which NavigationLink is currently in focus. Here is my code:
#State private var selection: String? = nil
.
ZStack {
Color.red.edgesIgnoringSafeArea(.all)
VStack {
Text(selection ?? "no value").background(Color.green)
NavigationView {
ScrollView(.horizontal) {
HStack{
VStack {
NavigationLink(destination: view2, tag: "1", selection: $selection) {
Image("placeholder")
.scaledToFit().frame(width:400, height: 225) }
Text("Button")
}
VStack {
NavigationLink(destination: view2, tag: "2", selection: $selection) {
Image("placeholder")
.scaledToFit().frame(width:400, height: 225) }
Text("Button")
}
...
}
}.frame(minWidth: 0, maxWidth: .infinity, minHeight: 0, maxHeight: .infinity, alignment: .bottomLeading)
}
}
}
}
However, label value doesn't change when I change selection and shows no value:
Any ideas what should I do there?

Answer 1

I believe your Image is taken up selection effect of your NavigationLink a simple fix would be adding a .padding() to your Image. Here is some good examples you could use to customize the NavigationLink selection. More specifically the .buttonStyle of the NavigationLink.
var body: some View {
ZStack {
VStack{
NavigationView {
ScrollView(.horizontal){
HStack(spacing: 90) {
VStack{
NavigationLink(destination: ResultView(choice: "Chaka")) {
Image("chaka")
.scaledToFit()
.frame(width:400, height: 225)
.padding(20)
Text("Choose Chaka")
}
}
VStack{
NavigationLink(destination: ResultView(choice: "Dr Rick Marshall")) {
Image("rick_marshall")
.scaledToFit().frame(width:400, height: 225)
.frame(width:400, height: 225)
.padding(20)
Text("Padding 20").foregroundColor(Color.white)
} .buttonStyle(DefaultButtonStyle()) // buttonStyle allows for selection customiaztion ie color
}
VStack{
NavigationLink(destination: ResultView(choice: "Will Stanton")) {
Image("danny_mcBride")
.scaledToFit().frame(width:400, height: 225)
.frame(width:400, height: 225)
Text("No Padding").foregroundColor(Color.white)
} .buttonStyle(DefaultButtonStyle())
}
}.padding(60) // allows for selection pop out effect to be seen
}
.navigationBarTitle("Navigation")
}
}
}
}

Answer 2

Try this:
VStack {
NavigationLink(destination: view2, tag: "2", selection: $selection) {
Image("placeholder")
.scaledToFit().frame(width:400, height: 225) }
Text("Button")
}.onTapGesture{ selection = "2" }
}
The onTapGesture will override the tap on the NavigationLink, but will have the same effect.