Hide & Disable TabBar when in NavigationDestination Subview - Apple Watch

I'm trying to create a UI layout and navigation functionality similar to the Apple Fitness app on Apple Watch.

This is all WatchOS 9 so no need for older API support, phew!

I want to have NavigationTitle set for each view in a TabBar.

I want each selected NavigationDestination to hide the TabBar controls and disable swiping when opened.

I want the NavigationTitle and update to remain whilst navigating between Tabs and Childs.

I've created this sample code based off the Building a productivity app for Apple Watch sample code from Apple and other examples on navigation with the new NavigationStack in WatchOS 9, iOS 16 etc...

import SwiftUI

@main
struct Test_Watch_App_Watch_AppApp: App {
    @SceneBuilder var body: some Scene {
        WindowGroup {
            TabView {
                NavigationStack {
                    ScrollView {
                        VStack {
                            NavigationLink("Mint", value: Color.mint)
                            NavigationLink("Pink", value: Color.pink)
                            NavigationLink("Teal", value: Color.teal)
                        }
                    }
                    .navigationDestination(for: Color.self) { color in
                        Text("Hello").background(color)
                    }
                    .navigationTitle("Colors")
                }

                NavigationStack {
                    ScrollView {
                        VStack {
                            NavigationLink("headline", value: Font.headline)
                            NavigationLink("title", value: Font.title)
                            NavigationLink("caption", value: Font.caption)
                        }
                    }
                    .navigationDestination(for: Font.self) { font in
                        Text("Hello").font(font)
                    }
                    .navigationTitle("Fonts")
                }
            }.tabViewStyle(.page)
        }
    }
}

The problem here is, when selecting any of the Navigation Links, the child view still displays the Tab Bar page indicators and allows you to swipe between the tabs, I don't want this. The functionality as I'd like exists int eh Apple Fitness app on the Watch. The app launches in the Activity Tab. You can swipe across to Sharing, select a person, and in that view it's not then possible to swipe straight back to Activity.

I've tried Embedding the whole TabView in a NavigationStack and removing the NavigationStacks per tab. This works as far as fixing the child views hiding the TabBar page indicator controls and swiping. However, it then breaks NavigationTitles on launch and when moving in and out of Childs, so I don't think it should be this way.

Any help very appreciated.

Accepted Reply

In the end I fixed this and got the behaviour I wanted without the need for a custom solution.

The solution was to wrap the whole thing in one navigationStack rather than individual ones. I had already tried this but had the bug mentioned with the navigationTitle not displaying properly. This was fixed by setting the NavigationTitle on the TabView to the same title as the title on the first Tab item view. This is likely a bug which I'll report.

Thanks

  • After wrapping the whole thing in one navigationStack, have you encountered any issues presenting a ActionSheet or .sheet with a view on the navigation stack? In my case, when the ActionSheet was dismissed, its parent view (presenting view) is also dismissed (i.e. pop out the navigation stack). (See my question here: https://developer.apple.com/forums/thread/745733 ) Don't know if it only happens to iOS 15, which I have to support at the moment.

Add a Comment

Replies

In the end I fixed this and got the behaviour I wanted without the need for a custom solution.

The solution was to wrap the whole thing in one navigationStack rather than individual ones. I had already tried this but had the bug mentioned with the navigationTitle not displaying properly. This was fixed by setting the NavigationTitle on the TabView to the same title as the title on the first Tab item view. This is likely a bug which I'll report.

Thanks

  • After wrapping the whole thing in one navigationStack, have you encountered any issues presenting a ActionSheet or .sheet with a view on the navigation stack? In my case, when the ActionSheet was dismissed, its parent view (presenting view) is also dismissed (i.e. pop out the navigation stack). (See my question here: https://developer.apple.com/forums/thread/745733 ) Don't know if it only happens to iOS 15, which I have to support at the moment.

Add a Comment