SwiftUI: NavigationView bug in WatchOS 8.1 When List and ForEach is embedded in TabView

Viewed 569

The code below worked fine in WatchOS 7 and 8.0, but now in 8.1 tapping on the row will navigate to the destination but then immediately navigates back to the root view.

I filed Feedback #FB9727188 and included the below to demonstrate the issue.

struct ContentView: View {

 @State var tabIndex:Int = 0

    var body: some View {
            TabView(selection: $tabIndex) {
            ListView()
                .tabItem { Group{
                    Text("List")
                }}.tag(0)
                .padding(.bottom, 1.0)
             Text("Second View")
                .tabItem { Group{
                    Text("Second")
                }}.tag(1)
            .padding(.bottom, 1.0)
             Text("Third View")
                .tabItem { Group{
                    Text("ThirdView")
                }}.tag(2)
           
        
            
        }
    }
}


struct ListView: View {
    var body: some View {
         List {
            ForEach((1...10).reversed(), id: \.self) {_ in
                NavigationLink(destination: Text("test")) {
                    Text("Tap Me but we'll just be back here")
                }
            }
            
        }
    }
}
1 Answers

I'm experiencing the same issue with watchOS 8.1 (and 8.3 beta) while it was working with previous watchOS versions.

We were able to get it working again by moving the NavigationView inside the TabView. This workaround isn't ideal at all but it does seem to work.

@State private var tabSelection = 1

var body: some Scene {
    WindowGroup {
        TabView(selection: $tabSelection) {
            NavigationView {
                // List goes here
            }
            .tag(1)
            
            VStack {
                // content 2nd tab: we didn't have a list in the 2nd tab
            }
            .tag(2)
        }
    }
}

However, there are 2 things impacted with this fix:

  • I didn't get the navigationBarTitle working, so there won't be a title on top of the screen.
  • If you click on an item in the list, it will navigate to your page (as expected) but the TabView dots at the bottom of the screen will remain.
Related