skip to Main Content

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.

2

Answers


  1. 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.

    Login or Signup to reply.
  2. 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

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search