Problems with navigation stack inside a tab view

Question

Created Aug ’24

Replies 3

Boosts 1

Participants 3

So basically, if I put a .navigationModifier inside of a NavigationStack that's inside of a TabView, AND I supply a path argument to NavigationStack. I get this error:

Do not put a navigation destination modifier inside a "lazy” container, like `List` or `LazyVStack`. These containers create child views only when needed to render on screen. Add the navigation destination modifier outside these containers so that the navigation stack can always see the destination. There's a misplaced `navigationDestination(for:destination:)` modifier for type `NavPath`. It will be ignored in a future release.

Does TabView or NavigationStack suddenly become lazy when I put the path parameter in? It also causes weird unexplained behavior if I start removing tabs using state, but I do think I'm not supposed to do that.

Code for reference:

var body: some View {
        @Bindable var nm = navManager
        TabView{
                NavigationStack(path: $nm.pathStack){
                HomeView() // A custom view
                    .navigationDestination(for: NavPath.self) { np in // NavPath is a custom struct that's hashable
                        switch np.pathId {
                        case "home":
                            NavigationLazyView(HomeView()) // Ignore the NavigationLazyView, does not affect
...

Boost

Answer 1

DTS Engineer OP

Apple

Aug ’24

@fbd117 I wasn't able to reproduce the issue. Does the code snippet below represents what your example:

enum Route: Hashable {
    case View1
    case View2
}

struct ContentView: View {
    @State private var path: [Route] = []
    
    var body: some View {
        TabView {
            Tab("Received", systemImage: "tray.and.arrow.down.fill") {
                NavigationStack(path: $path) {
                    ReceivedView()
                        .navigationDestination(for: Route.self) { route in
                            switch route {
                            case .View1:
                                Text("View1")
                            case .View2:
                                Text("View2")
                            }
                        }
                }
            }
            Tab("Sent", systemImage: "tray.and.arrow.up.fill") {
                SentView()
            }
        }
    }
}

struct ReceivedView: View {
    var body: some View {
        List {
            NavigationLink(value: Route.View1) {
                Text("view1")
            }
            
            NavigationLink(value: Route.View2) {
                Text("view2")
            }
        }
    }
}

struct SentView: View {
    var body: some View {
        Text("Sent Items")
    }
}

0

Answer 2

fbd117 OP

Aug ’24

I did not wrap my HomeView around a Tab, instead I used the .tabItem modifier. let me test and I'll get back to you.

EDIT: Just to be clear, my minimum deployment is 17.5. Seems like Tab is for 18+ https://developer.apple.com/documentation/swiftui/tab

For more context, here's some more of my code:

   TabView(selection: $tabIdx){
            SettingsView()
                .tabItem {
                    Label("Settings", systemImage: "gearshape.fill")
                }
                .tag(0)
            
            NavStackView {
                HelloWorld()
            }
            .tabItem {
                Label("Home", systemImage: "house.fill")
            }
            .tag(1)
            
            CustomStoreView()
                .tabItem {
                    Label("Shop", systemImage: "storefront.fill")
                }
                .tag(2)
        }


struct NavStackView<Content: View>: View{
    @Environment(NavManager.self) private var navManager
    
    @ViewBuilder let root: Content
    
    var body: some View {
        @Bindable var nm = navManager
        
        NavigationStack(path: $nm.pathStack){
            root
                .navigationDestination(for: NavPath.self) { np in
                    switch np.pathId {
                    case "home":
                        NavigationLazyView(HomeView())
                    ...

1

Answer 3

shawnthroop OP

Sep ’24

Similar problem here, but for me it doesn't happen on the simulator (iOS 17.2).

It happens for me when the navigation path is not empty, like when unarchiving from a previous state. Using transition makes things animate from the corners for some reason...

Would definitely like to hear more from anyone on this

0