Navigation stack yellow warning triangle

Question

I'm attempting to listen for a change in a boolean value & changing the view once it has been heard which it does successfully, however, results in a yellow triangle. I haven't managed to pinpoint the issue but it doesn't seem to have anything to do with the view that it's transitioning to as even when changed the error still persists.

My code is below

import SwiftUI

struct ConversationsView: View {
    @State var isShowingNewMessageView = false
    @State var showChat = false
    @State var root = [Root]()
    var body: some View {
        NavigationStack(path: $root) {
            ZStack(alignment: .bottomTrailing) {
                ScrollView {
                    LazyVStack {
                        ForEach(0 ..< 20) { _ in
                            Text("Test")
                        }
                    }
                }.padding()
            }

            Button {
                self.isShowingNewMessageView.toggle()
            } label: {
                Image(systemName: "plus.message.fill")
                    .resizable()
                    .renderingMode(.template)
                    .frame(width: 48, height: 48)
                    .padding()
                    .foregroundColor(Color.blue)
                    .sheet(isPresented: $isShowingNewMessageView, content: {
                        NewMessageView(show: $isShowingNewMessageView, startChat: $showChat)
                    })
            }
        }
        .onChange(of: showChat) { newValue in
            guard newValue else { return }
            root.append(.profile)
        }.navigationDestination(for: Root.self) { navigation in
            switch navigation {
            case .profile:
                ChatView()
            }
        }
    }

    enum Root {
        case profile
    }
}

ChatView() Code:

import SwiftUI

struct ChatView: View {
    @State var messageText: String = ""
    var body: some View {
        VStack {
            ScrollView {
                VStack(alignment: .leading, spacing: 12) {
                    ForEach(MOCK_MESSAGES) { message in
                        MessageView(message: message)
                    }
                }
            }.padding(.top)

            MessageInputView(messageText: $messageText)
                .padding()
        }
    }
}

Any support is much appreciated.

Answer 1

You should use navigationDestination modifier inside your NavigationStack component, just move it.

NavigationStack(path: $root) {
    ZStack(alignment: .bottomTrailing) {
        
        ScrollView {
            LazyVStack {
                ForEach(0..<20) { _ in
                    Text("Test")
                }
            }
        }.padding()
    }.navigationDestination(for: Root.self) { navigation in
        switch navigation {
        case .profile:
            ChatView()
        }
    }

  //...
}

Basically this yellow triangle means NavigationStack can't find suitable component for path. And when you using navigationDestination directly on NavigationStack View or somewhere outside it is ignored

Answer 2

For any this may help. For me, I kept seeing this because I was navigating to a view that also had a NavigationStack within it. So I guess the nested navigationStack didn't work that well so I simply removed the navigation stack from the second view.