SwiftUI NavigationView cannot appears multiple NavigationLinks

Question

I have a navigation view and each NavigationLink jumps to a color view:

struct ContentView: View {
    private let navigationLinks: [NavigationItem] = [
        NavigationItem("Red", AnyView(Color.red.edgesIgnoringSafeArea(.all))),
        NavigationItem("Orange", AnyView(Color.orange.edgesIgnoringSafeArea(.all))),
        NavigationItem("Yellow", AnyView(Color.yellow.edgesIgnoringSafeArea(.all))),
        NavigationItem("Green", AnyView(Color.green.edgesIgnoringSafeArea(.all))),
        NavigationItem("Blue", AnyView(Color.blue.edgesIgnoringSafeArea(.all))),
        NavigationItem("Purple", AnyView(Color.purple.edgesIgnoringSafeArea(.all))),
        NavigationItem("Pink", AnyView(Color.pink.edgesIgnoringSafeArea(.all))),
        NavigationItem("Cyan", AnyView(Color.cyan.edgesIgnoringSafeArea(.all))),
        NavigationItem("Teal", AnyView(Color.teal.edgesIgnoringSafeArea(.all))),
        NavigationItem("Black", AnyView(Color.black.edgesIgnoringSafeArea(.all))),
        NavigationItem("Gray", AnyView(Color.gray.edgesIgnoringSafeArea(.all))),
    ]
    
    var body: some View {
        NavigationView {
            ForEach(self.navigationLinks, id:\.key) { item in
                NavigationLink(destination: item.value) {
                    Text(item.key)
                }
            }
        }
    }
}

struct NavigationItem {
    let key: String
    let value: AnyView
    init(_ key: String, _ value: AnyView) {
        self.key = key
        self.value = value
    }
}

The result of running the program is just an Orange Item, and the other NavigationItems have disappeared.

When I click the back button in the upper left corner it will go back to the Red Item.

Is there any work around for this?

Answer 1

Your current ForEach will directly add all Text to NavigationView and this makes NavigationView confused. Wrap your ForEach to either List or VStack.

List { //Or VStack {
    ForEach(self.navigationLinks, id:\.key) { item in
        NavigationLink(destination: item.value) {
            Text(item.key)
        }
    }
}

Note: With VStack you don't have scroll so if you are planning to add more items or a dynamic list then it's better to use List View only.