Search code examples
swiftuiwatchosswiftui-navigationlink

SwiftUI's NavigationView Is Missing The Back Button On Apple Watch

I created an Apple Watch app using SwiftIU. The main view of the app is a List, with NavigationLink to another List. When I'm in one of the internal Lists, the back button isn't on the top of the view. But when I swipe from the side of the screen (like on iOS), I go back to the main view.

Is there a way to add back the back button to the top of the screen? Is the new gesture the new "back button" for watchOS 7?

Xcode 12.2 (beta 3). Apple Watch S6 (simulator, 7.1) and Apple Watch S5 (real, 7.0). SwiftIU 2.0

The main view:

NavigationView {
    List {
        ForEach(listsModel.lists) { (list) in
            NavigationLink(destination: ListView(list: list)
                            .environmentObject(list.rowsModel)) {
                ListsRowView(list: list)
            }
        }
    }
}
.onAppear {
    listsModel.update()
}
.navigationTitle("ListsView.NavigationTitle")

The internal view:

List(rowsModel.rows) { (row) in
    RowView(row: row, shouldUpdate: $shouldUpdate)
}
.navigationBarHidden(false)
.onAppear {
    instantiateTimer()
    rowsModel.update()
}
.onDisappear {
    cancelTimer()
}
.onReceive(timer) { _ in
    if shouldUpdate {
        rowsModel.update()
    }
}
.navigationTitle(list.name)

Update: In the Canvas simulator, there is a back button, but on the regular simulator, it's not. Canvas:

Canvas

Regular:

Regular

Solution

  • Remove the NavigationView, so your code would be:

    List {
   ForEach(listsModel.lists) { (list) in
        NavigationLink(destination: ListView(list: list)
              .environmentObject(list.rowsModel)) {
        ListsRowView(list: list)
        }
    }
}
.onAppear {
    listsModel.update()
}
.navigationTitle("ListsView.NavigationTitle")

    The reason for this is that watchOS always has system NavigationView added by default