NavigationLink inside TabView stops working

Question

I have a view (NewGameView) with a NavigationLink to a different view (LoadView). In this second one there is a Button that closes the view, going back to the first one. This works wonderfully, until I put the NewGameView inside a TabView. Then the link works only one or two times, and then stops doing anything. The animation of the link being clicked is still there, but it doesn't open the LoadView. To clarify: I can click the link in NewGameView which opens the LoadView, then click the button to go back to NewGame view, but only a couple times. Then I'm stuck on NewGameView with the link not working. This only happens when inside a TabView.

ContentView.swift

struct ContentView: View {    
    var body: some View {
        TabView {
            NewGameView()
                .tabItem { Label("cargar", systemImage: "dice") }
        }
    }
}

NewGameView.swift

struct NewGameView: View {
    var body: some View {
        NavigationStack {
            NavigationLink(value: "something", label: {
                Text("NUEVA PARTIDA")
                    .font(.headline)
                    .frame(width: 200, height: 50)
                    .foregroundColor(Color("myyellow"))
                    .background(Color("myred"))
                    .cornerRadius(15)
                    .padding()
            })
            .navigationDestination(for: String.self) { _ in
                LoadView()
                    .navigationBarBackButtonHidden(true)
            }
        }
    }
}

LoadView.swift

struct LoadView: View {
    @State var dice = DiceRoll(red_value: 1, yel_value: 1, act_value: 1)

    @Environment(\.dismiss) var dismiss
    
    var body: some View {
        VStack {
            Button("TERMINAR PARTIDA") {
                dismiss()
            }
            .font(.headline)
            .frame(width: 200, height: 50)
            .foregroundColor(Color("myyellow"))
            .background(Color("myred"))
            .cornerRadius(15)
            .padding()
            
            DiceSelectionView(dice: $dice)
            
            ButtonLoad()
        }
    }
}

The preview in NewGameView works fine, but the one in ContentView is having the issues described.

Answer 1

You could try this approach using .navigationDestination and a different NavigationLink call.

Example code:

struct ContentView: View {
    
    var body: some View {
        TabView {
            NewGameView()
                .tabItem { Label("cargar", systemImage: "dice") }
        }
    }
}

struct NewGameView: View {
    
    var body: some View {
        NavigationStack {
            NavigationLink(value: "something", label: { // <--- here
                Text("NUEVA PARTIDA")
                    .font(.headline)
                    .frame(width: 200, height: 50)
                    .foregroundColor(Color.yellow)
                    .background(Color.red)
                    .cornerRadius(15)
                    .padding()
            })
            .navigationDestination(for: String.self) { _ in  // <--- here
                LoadView()
                    .navigationBarBackButtonHidden(true)
            }
        }
    }
}

struct LoadView: View {
    @State var dice = DiceRoll(red_value: 1, yel_value: 1, act_value: 1)
    
    @Environment(\.dismiss) var dismiss  // <--- here
    
    var body: some View {
        VStack {
            Button("TERMINAR PARTIDA") {
                dismiss() // <--- here
            }
            .font(.headline)
            .frame(width: 200, height: 50)
            .foregroundColor(Color.yellow)
            .background(Color.red)
            .cornerRadius(15)
            .padding()
            //     DiceSelectionView(dice: $dice)
            //     ButtonLoad()
        }
    }
}

struct DiceRoll: Identifiable {
    let id = UUID()
    var red_value: Int
    var yel_value: Int
    var act_value: Int
}