NavigationStack inside TabView inside NavigationStack does not work

Question

I want to have a root NavigationStack that lets the user navigate around a SwiftUI app, including to a TabView with tabs that have their own navigation stack. Unfortunately, this seems to not work at all (xcode 14.2, iOS 16).

The following example demonstrates the issue. When you attempt to navigate inside the tab view navigation stack, the tabs disappear and then the app goes into a broken state where navigation basically stops working entirely.

import SwiftUI

struct TabsView: View {
    var body: some View {
        TabView {
            NavigationStack {
                ZStack {
                    NavigationLink("Navigate to child tab", value: 1)
                }
                .navigationDestination(for: Int.self) { screen in
                    Text("Tab child \(screen)")
                }
            }
            .tabItem {
                Label("Screen 1", systemImage: "house")
            }
            
            Text("Screen 2")
                .tabItem {
                    Label("Screen 2", systemImage: "house")
                }
        }
    }
}

struct ContentView: View {
    var body: some View {
        NavigationStack {
            VStack {
                NavigationLink("Show Tabs", value: "tabs")
            }
            .navigationDestination(for: String.self) { screen in
                if screen == "tabs" {
                    TabsView()
                } else {
                    Text("?")
                }
            }
        }
    }
}

How can I make this work?

Answer 1

Use NavigationView in ContentView. Apple has problems with NavigationStack in hierarchy of NavigationStack.

Answer 2

Found solution for this one!

I am placing "top" NavigationStack with Color.clear initial view right after TabView in ZStack.

ZStack {
    tabBarView
        .zIndex(0)
    
    NavigationStack(path: $coordinator.topPath) {
        Color.clear
            .navigationDestination(for: CoordinatorService.Step.self) { destination in
                coordinator.resolve(pathItem: destination)
            }
    }
    .zIndex(1)
    .allowsHitTesting(!coordinator.topPath.isEmpty)
    .introspect(.navigationStack, on: .iOS(.v16, .v17)) {
        $0.viewControllers.forEach { controller in
            controller.view.backgroundColor = .clear
        }
    }
}
.environmentObject(coordinator)

We have to use Introspect library to remove that's NavigationStack's white background, because SwiftUI don't bring that possibility.

Also I am disabling hit testing on top navigation view when there are no views on top.

Check out full example project here:

https://github.com/thekingofsofa/TabNavigationStack/tree/main