NavigationStack and TabView - Toolbar and title not showing

Question

I have a problem regarding a TabView that is displayed inside of a NavigationStack. The TabView contains multiple views. Each view has its own navigationBarTitle and toolbar. The problem is that these views toolbar and navigation title are not shown. Just the content that is defined inside the views. I wrote the following code:

struct Home : View {
 var body some : View {
      NavigationStack {
          TabView(selection: $router.currentTab) {
            First()
                .tag(0)
            
            Second()
                .tag(1)
            
            Third()
                .tag(2)
            
            Fourth()
                .tag(3)
            
            Fifth()
                .tag(4)
        }
    }
 }
}

The First() view is defined the following (all other views are structured similar):

  struct First: View {
    
    var body: some View {
        ZStack {
            Color("background").ignoresSafeArea(.all)
            ScrollView {
                VStack(spacing: 15) {
                    
                    WhatsNewView()
                    
                    FavoriteView()
                    
                    Spacer()
                }
            }
            .refreshable {
                DispatchQueue.main.asyncAfter(deadline: .now() + 2) {
                    newsService.getArticles()
                    simpleSuccess()
                }
            }
        }
        .toolbar {
            ToolbarItem(placement: .navigationBarTrailing) {
                UserButton()
            }
            
            ToolbarItem(placement: .navigationBarLeading) {
                ToolbarRanking()
            }
            
            ToolbarItem(placement: .navigationBarLeading) {
                ToolbarCalendar()
            }
            
            ToolbarItem(placement: .navigationBarLeading) {
                ToolbarSearch()
            }
        }
        .navigationBarTitle("Home")
    }
}

Does anyone know how to fix that problem?

Answer 1

The TabView should be your top-level view.

Each tab should then contain its own NavigationStack. e.g.

enum Router {
    case screenA, screenB
}

struct ContentView: View {
    
    var body: some View {
        TabView() {
            FirstScreen()
            
            NavigationStack {
                Text("second")
                    .navigationTitle("second")
            }
            .tabItem {
                Label("second", systemImage: "2.circle")
            }
            NavigationStack {
                Text("third")
                    .navigationTitle("third")
            }
            .tabItem {
                Label("third", systemImage: "3.circle")
            }
            NavigationStack {
                Text("fourth")
                    .navigationTitle("fourth")
            }
            .tabItem {
                Label("fourth", systemImage: "4.circle")
            }

            NavigationStack {
                Text("fifth")
                    .navigationTitle("fifth")
            }
            .tabItem {
                Label("fifth", systemImage: "5.circle")
            }
        }
    }
}

struct FirstScreen: View {
    
    @State private var path: [Router] = []
    
    var body: some View {
        NavigationStack(path: $path) {
            VStack {
                Text("first")
                NavigationLink("Screen A", value: Router.screenA)
            }
            .navigationDestination(for: Router.self) { router in
                switch router {
                case .screenA:
                    VStack {
                        NavigationLink("Screen B", value: Router.screenB)
                    }
                    .navigationTitle("Screen A")
                    
                case .screenB:
                    VStack {
                        Button("Pop to root") {
                            path = []
                        }
                    }
                    .navigationTitle("Screen B")
                }
            }
            .navigationTitle("first")
        }
        .tabItem {
            Label("first", systemImage: "1.circle")
        }
        .task {
            print("First screen task")
        }
        .onAppear {
            print("First screen appears")
        }
    }
}