Hi, I'm having some weird issues with navigation that I am sure are down to me missing something. When I navigate around my app after navigating between around 20 links the screen goes grey. If I swipe the app up (to close it) I can see the content again. It's like some kind of overlay?

Below are the contentview and one of the other views (the rest are basically the same, just load different text files).

Any pointers on what I am doing wrong would be really appreciated.

//
//  ContentView.swift
//  spanis flash cards
//
//  Created by Liam Caulfield on 3/11/22.
//

import SwiftUI

struct ContentView: View {

    var body: some View {
        NavigationView {
            VStack {
                //Header
                //English word
                Text("SPANISH FLASH CARDS")
                    .font(Font.custom("Montserrat-Bold", size: 30))
                    .multilineTextAlignment(.center)
                    .foregroundColor(.white.opacity(0.8))

                //1000 Words
               NavigationLink(destination: thousandWords().navigationBarBackButtonHidden(true)) {
                    Text("1000 words".uppercased())
                        .font(Font.custom("Montserrat-Bold", size: 30))
                        .multilineTextAlignment(.center)
                        .foregroundColor(.black.opacity(0.6))
                        .frame(maxWidth: .infinity, maxHeight: .infinity)
                        .padding(10)
                        .background(.white.opacity(0.6))
                        .cornerRadius(20)
                        .navigationBarHidden(true)
                        .navigationBarBackButtonHidden(true)
                }
                //Words end in ant
                NavigationLink(destination: ant_ante().navigationBarBackButtonHidden(true)) {
                     Text("words that end in 'Ant'".uppercased())
                         .font(Font.custom("Montserrat-Bold", size: 30))
                         .multilineTextAlignment(.center)
                         .foregroundColor(.black.opacity(0.6))
                         .frame(maxWidth: .infinity, maxHeight: .infinity)
                         .padding(10)
                         .background(.white.opacity(0.6))
                         .cornerRadius(20)
                         .navigationBarHidden(true)
                         .navigationBarBackButtonHidden(true)
                 }
                //Words end in tion
                NavigationLink(destination: tion_cion().navigationBarBackButtonHidden(true)) {
                     Text("words that end in 'tion'".uppercased())
                         .font(Font.custom("Montserrat-Bold", size: 30))
                         .multilineTextAlignment(.center)
                         .foregroundColor(.black.opacity(0.6))
                         .frame(maxWidth: .infinity, maxHeight: .infinity)
                         .padding(10)
                         .background(.white.opacity(0.6))
                         .cornerRadius(20)
                         .navigationBarHidden(true)
                         .navigationBarBackButtonHidden(true)
                 }
            }
            .padding(30)
            .background(Color.pink)
        }
        .navigationBarHidden(true)
        .navigationBarBackButtonHidden(true)
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()

    }
}

//
//  ObjectCategory.swift
//  spanis flash cards
//
//  Created by Liam Caulfield on 6/11/22.
//

import SwiftUI

struct thousandWords: View {

    @State private var englishWord = "1000 words"
    @State private var spanishWord = "1000 palabras"
    @State private var transImage = "🦄"
    @State private var showResult = true
    @State private var englishWords = [String]()
    @State private var spanishWords = [String]()
    @State private var imageEmoji = [String]()

    func translated() {
            //import English
            if let english1000URL = Bundle.main.url(forResource: "english-1000", withExtension: "txt") {
                if let englishWord1000 = try? String(contentsOf: english1000URL) {
                    englishWords = englishWord1000.components(separatedBy: "\n")
                }
            }
            if englishWords.isEmpty {
                englishWords = ["silkworm"]
            }

            //import Spanish
            if let spanish1000URL = Bundle.main.url(forResource: "spanish-1000", withExtension: "txt") {
                if let spanishWord1000 = try? String(contentsOf: spanish1000URL) {
                    spanishWords = spanishWord1000.components(separatedBy: "\n")
                }
            }
            if spanishWords.isEmpty {
                spanishWords = ["potato"]
            }

        let chosenWord = Int.random(in: 0...999)

        englishWord = ("\(englishWords[chosenWord])")
        spanishWord = ("\(spanishWords[chosenWord])")
    }

    var body: some View {

            VStack {
                    VStack {
                        //English word
                        Text(englishWord.uppercased())
                                .font(Font.custom("Montserrat-Bold", size: 30))
                                .multilineTextAlignment(.center)
                                .foregroundColor(.black.opacity(0.6))
                                .frame(maxWidth: .infinity, maxHeight: .infinity)
                                .padding(10)
                                .background(.white.opacity(0.6))
                                .cornerRadius(20)

                        //Spanish word
                        if showResult {
                                Text(spanishWord.uppercased())
                                    .font(Font.custom("Montserrat-Bold", size: 30))
                                    .multilineTextAlignment(.center)
                                    .foregroundColor(.white.opacity(0.8))
                                    .frame(maxWidth: .infinity, maxHeight: .infinity)
                                    .padding(10)
                                    .background(.white.opacity(0.6))
                                    .cornerRadius(20)
                        } else {
                            Text(spanishWord.uppercased())
                                .font(Font.custom("Montserrat-Bold", size: 30))
                                .multilineTextAlignment(.center)
                                .foregroundColor(.white.opacity(0.0))
                                .frame(maxWidth: .infinity, maxHeight: .infinity)
                                .padding(10)
                                .background(.white.opacity(0.6))
                                .cornerRadius(20)
                        }

                        //Next word
                        Button(action: {
                            translated()
                        }, label: {
                            Image(systemName: "arrow.clockwise")
                                .font(.system(size: 30))
                                .foregroundColor(.black.opacity(0.6))
                                .frame(maxWidth: .infinity)
                                .padding()
                                .background(.white.opacity(0.6))
                                .cornerRadius(20)
                        })
                    }

                //Navigation
                HStack {
                    //Hide/show answer
                    Button(action: {
                        showResult.toggle()
                    }, label: {
                        if showResult == true {
                            Image(systemName: "eye")
                                .font(.system(size: 25))
                                .foregroundColor(.black.opacity(0.6))
                                .frame(maxWidth: .infinity)
                                .padding()
                                .background(.white.opacity(0.6))
                                .cornerRadius(20)

                        } else {
                            Image(systemName: "eye.slash")
                                .font(.system(size: 25))
                                .foregroundColor(.black.opacity(0.6))
                                .frame(maxWidth: .infinity)
                                .padding()
                                .background(.white.opacity(0.6))
                                .cornerRadius(20)

                        }
                    })

                    //Home
                    NavigationLink(destination: ContentView().navigationBarBackButtonHidden(true)) {
                        Image(systemName: "house")
                            .font(.system(size: 25))
                            .foregroundColor(.black.opacity(0.6))
                            .frame(maxWidth: .infinity)
                            .padding()
                            .background(.white.opacity(0.6))
                            .cornerRadius(20)
                            .navigationBarHidden(true)
                            .navigationBarBackButtonHidden(true)
                    }
                }
            }
            .padding(30)
            .background(Color.pink)
            .navigationBarHidden(true)
            .navigationBarBackButtonHidden(true)
    }
}

struct thousandWords_Previews: PreviewProvider {
    static var previews: some View {
        thousandWords()
    }
}

I was having a same issue, i was suggested a solution by @roosterboy, this happens as the stack of backbutton grows and navigation crashes, .navigationBarBackButtonHidden(true) simply hides the back button and solves nothing.. every time we hit navigationView we get the back button and the stack grows with a silent warning ....

So the solution, we need to have a NavigationView only once in our navigation cycle and find a way to never hit that View again (one with NavigationView)

You will need to modify your navigation structure accordingly

From thousandWords do not go to contentView, create the content of this view(ContentView) in separate view and go to that view instead

My case is as

FirstView --> SecondView ---> FinalView ----> FirstView

So first we create a main view from where we start the navigation

Main View structure called FirstView

struct FirstView: View {
    @State private var gotoSecond = false

    var body: some View {
        VStack {
            Text("I am first view")
            Button {
                gotoSecond = true
            } label: {
                Text("Go to Second View")
                    .font(.largeTitle)
            }

            NavigationLink("", destination: CardView(), isActive: $gotoSecond) 
        }
    }
}

See no NavigationView in above

Now we create content View and call the firstview

struct ContentView: View {
    var body: some View {
        NavigationView {
            FirstView()
        }
    }
}

Then second View

struct CardView: View {
   @State private var gotoFinalView = false
    var body: some View {
        VStack {
            Text(" I am second view")
            Button {
                gotoFinalView = true
            } label: {
                Text("Go to final view")
                    .font(.largeTitle)
            }
        }

        NavigationLink("", destination: FinalView(), isActive: $gotoFinalView)
    }
}

Now comes the important part from final view i will go to FirstView not the Content View to avoid hitting NavigationView

struct FinalView: View {
    @State private var gotofirstView = false
    var body: some View {
        VStack {
            Text(" I am final view")
            Button {
                gotofirstView = true
            } label: {
                Text("go back to first view")
                    .font(.largeTitle)
            }
        }

        NavigationLink("", destination: FirstView(), isActive: $gotofirstView)
    }
}

Hope this helps, good luck

I don't know much about the reason why this isn't working. But since NavigationView is actually depricated now, I wonder if using the new NavigationStack would resolve your problem?

I really don't know for sure that it would help. But it might be worth looking into.

@FlyOstrich - Navigation has been a bit problamatic in swiftui, this issue was there since long

Thanks for the replies, I think I understand what to do. But before I go ahead, is this the normal way to navigate in a swiftui app? I didnt expect it to be this complicated. I plan to add more pages/views over time - but do I need to plan them all out in advance? It's not possible to just link between views/pages?

@FlyOstrich - I thought I'd try changing it from a NavigationView to a NavigationStack - it fixed the problem. Just seems a shame to have to make the app iOS16 only.

@Bigdrunk, come to think of it , its not very complicated, just switch the contentview body to some other view and call it , avoid going to NavigationView as that will cause the backbutton issue and also this grey screen ... its really a very nice clean way

I had tried using @EnvironmentObject by creating a ViewRouter along with a motherView, then move from one view to other, but we miss on many baked in features ..

Quick update, thank you all for your help. But I think I was trying to run before I can walk by using custom back buttons, I dont know why I went straight for those. But I'm now using the built in back button in the navigation bar, I'll revisit this but it means I can keep learning/building my app.