NavigationLink buttons on tvOS with SwiftUI not working

Viewed 699

I am trying to build a simple navigation UI on Apple TV with SwiftUI:

,

As I can tell, I need to use either NavigationLink or NavigationLink combined with Button.

I have tried several implementations and none of them worked:

        NavigationLink(destination: view2) {
            Image("placeholder").frame(width:400, height: 300)
            Text("Button")
        }

        NavigationLink(destination: view2) {
            Button(action: {print("hey")}) {
                VStack{
                    Image("placeholder").frame(width:400, height: 300)
                    Text("Button")
                }
            }
        }

        Button(action: {print("hi1")}) {
            VStack{
                Image("placeholder").frame(width:400, height: 300)
                Text("Button")
            }
        }.background(NavigationLink(destination: view2) { Text("hi2") })



         NavigationLink(destination: view2) {
            Text("hey")
         }.background(Button(action: {print("hey")}) {
            VStack{
                Image("placeholder").frame(width:400, height: 300)
                Text("Button")
            }
        })

The first two ones are not selectable with Magic Remote: they won't become focused. The last ones are simply not navigating to another view when I press on them.

How do I implement this style of navigation on tvOS with SwiftUI?

1 Answers

NavigationLink works by itself, standalone, only on watchOS (that might confuse), in all other supported OSs it should be included in NavigationView to operate, so

in pseudo-code

  NavigationView {
     // ... some code

     NavigationLink(...)   // must be anywhere inside

     // ... other code
  }
Related