How to do navigation in SwiftUI in watchOS

Issue #447

NavigationView is not available on WatchKit, but we can just use NavigationLink

swift
List(services.map({ AnyService($0) })) { anyService in
    NavigationLink(destination:
        ItemsView(service: anyService.service)
            .navigationBarTitle(anyService.service.name)
            .onDisappear(perform: {
                anyService.service.requestCancellable?.cancel()
            })
    ) {
        HStack {
            Image(anyService.service.name)
                .resizable()
                .frame(width: 30, height: 30, alignment: .leading)
            Text(anyService.service.name)
        }
    }
}

Adding NavigationLink to a View adds a round shadow cropping effect, which is usually not want we want.

But we shouldn’t wrap Button as Button handles its own touch event, plus it has double shadow effect.

swift
NavigationLink(destination:
    QRCodeView(title: item.title, url: item.url)
) {
    Button(action: {}) {
         Text("Open")
    }
}

Just use Text and it’s good to go

swift
NavigationLink(destination:
    QRCodeView(title: item.title, url: item.url)
) {
    Text("Open")
}
Written by

I’m open source contributor, writer, speaker and product maker.

Start the conversation