NavigationStack in combination with a TabView (SwiftUI, iOS16)

Question

What is the correct way to combine the mentioned views.

As of now, i have a NavigationStack at the bottom of my app. It displays a LaunchView as root. When a user is authenticated, the main view is added to the stack, if not, the login/ register views are added to the stack. This works fine.

NavigationStack(path: self.$vm.path) {
        LaunchView()
            .navigationDestination(for: Authentication.self) { value in
                switch value {
                    case .login:
                        LoginView(vm: LoginViewModel() { type, action in
                            ...
                        })
                    case .verify: // let .verify(email)
                        VerifyMailView(vm: VerifyMailViewModel() { type, action in
                            ...
                        })
                    case .authenticated:
                        AuthenticatedView() { type, action in
                            self.vm.set(type: type) { value in
                                ...
                            }
                        }
                }
            }
        
    }

The AuthenticatedView consists of a TabView with three views. Here comes the issue. I assumed i could set the title and toolbars of the three views directly on them, which is not the case. However i don't want nor can set the titles or the toolbars within the tabview, as they require data from the views viewmodels (to which the TabView has, and should not have, no access).

TabView(selection: self.$vm.index) {
        DiscoverView(vm: DiscoverViewModel(account: self.vm.$account, type: self.type))
        .tabItem {
            Image(self.vm.index == 0 ? "discover.selected" : "discover")
        }
        .tag(0)
        
        MatchesView(vm: MatchesViewModel(type: self.type))
        .tabItem {
            Image(self.vm.index == 1 ? "matches.selected" : "matches")
        }
        .tag(1)
        
        ProfileView(vm: ProfileViewModel(account: self.vm.$account, type: self.type))
        .tabItem {
            Image(self.vm.index == 2 ? "profile.selected" : "profile")
        }
        .tag(2)
    }
    .toolbar(.hidden, for: .navigationBar)

The only workaround i found is to hide the navigationbar in the TabView and to set new NavigationViews within the child views.

        NavigationView {
            VStack {
                ...
            }
            .navigationTitle(Text("discover"))
            .toolbar {
                ...
            }
        }

This, however, feels not correct as it is a NavigationView inside a NavigationView and even is buggy (the title and toolbar are sometimes placed below their normal position, kind of like below the hidden, but still exisiting navigation bar of the TabView).

Thus, has anyone found a solution of how to properly combine a NavigationStack with a TabView ?

Answer 1

I found lorem ipsum's comments to be enlightening, so I built a sample app based on their ideas.

The following Swift code is an example for how a basic app can be built, where each page in a TabView has its own NavigationStack.

import SwiftUI

struct ContentView: View {
    var body: some View {
        TabView {
            AirplaneView()
                .tabItem {
                    Label("Airplane Tab", systemImage: "airplane.circle")
                }
            PlanetView()
                .tabItem {
                    Label("Planet Tab", systemImage: "globe.americas.fill")
                }
        }
    }
}

struct AirplaneView: View {
    var body: some View {
        NavigationStack {
            VStack {
                Text("Airplane tab view")
                Divider()
                NavigationLink(destination: NestedItemA()) {
                    Text("Go to nested airplane view")
                }
                .navigationTitle("Airplane")
            }
        }
    }
}

struct PlanetView: View {
    var body: some View {
        NavigationStack {
            VStack {
                Text("Planet tab view")
                Divider()
                NavigationLink(destination: NestedItemB()) {
                    Text("Go to nested planet view")
                }
                .navigationTitle("Planet")
            }
        }
    }
}

struct NestedItemA: View {
    var body: some View {
        NavigationStack {
            Text("Airplane goes vroom")
                .navigationTitle("Nested airplane")
        }
    }
}

struct NestedItemB: View {
    var body: some View {
        NavigationStack {
            Text("Planet spin good")
                .navigationTitle("Nested planet")
        }
    }
}

Here is an animated preview.