Navigation stack yellow warning triangle-CodePudding

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.

CodePudding user response：

You must set .environmentObject(root) to NavigationStack in order to provide the NavigationPath to the view subhierarchy (ChatView in your case). Also you must have a @EnvironmentObject property of type Root in your ChatView so that it can read the path.

CodePudding user response：

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