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?

• Qazi Ammar: does this answer you question. Swift navigation bar not appearing.
• lorem ipsum: Apple doesn’t want a TabView below a NavigstionView/Stack it must always be at the top this answer elaborates a little
• Greg Ennis: But it works fine if I use the old NavigationView instead of the newer NavigationStack, so I don't think that's really the issue.
• lorem ipsum: It just appears to look fine on iPhone the issues are clear if you try on iPad (Double column) and try to assign navigation title's, you end up having to hide navigation bars, etc. Apple has gone out of their way to enforce that they shouldn't be related.
• lorem ipsum: You can also create your own tab view and all the issues are gone, it only takes a few lines of code.

Answer 1

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

• Greg Ennis: NavigationView has been deprecated and Apple specifically states to move away from it and use NavigationStack instead. developer.apple.com/documentation/swiftui/…

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

EDIT 28.08.24:

We can now remove Introspect library and use ".containerBackground(.clear, for: .navigation)" in iOS 18 to have invisible background for top NavigationStack.