Navigation Link leading to gray screen in Swift UI - swiftui

Question

I am new to SwiftUI and am having a bug where my entire screen turns gray when I use too many Navigation Links.
I cannot find any solutions while researching the bug.
I am running the project on the newest version of Xcode 12.4.
My current setup is to have 2 different swiftUI Views, each containing a Navigation Link to the other.
This is what it looks like
Code:
PageOne.swift
struct PageOne: View {
var body: some View {
NavigationView {
VStack {
Text("This is page 1")
.font(.system(size: 36, weight: .bold))
.padding(.bottom)
NavigationLink(
destination: PageTwo(),
label: {
VStack {
Text("Go to Page 2")
.font(.system(size: 24, weight: .medium))
.foregroundColor(.white)
.frame(width: 200, height: 50, alignment: .center)
.background(Color.blue)
.cornerRadius(12)
}
})
}
}
.navigationBarHidden(true)
.navigationBarBackButtonHidden(true)
}
}
PageTwo.swift
struct PageTwo: View {
var body: some View {
NavigationView {
VStack {
Text("This is page 2")
.font(.system(size: 36, weight: .bold))
.padding(.bottom)
NavigationLink(
destination: PageOne(),
label: {
VStack {
Text("Go to Page 1")
.font(.system(size: 24, weight: .medium))
.foregroundColor(.white)
.frame(width: 200, height: 50, alignment: .center)
.background(Color.blue)
.cornerRadius(12)
}
})
}
}
.navigationBarHidden(true)
.navigationBarBackButtonHidden(true)
}
}
Project file

Answer 1

You should only have one NavigationView in the view hierarchy.
Try creating one NavigationView at the root level:
struct ContentView: View {
var body: some View {
NavigationView {
PageOne()
.navigationBarHidden(true)
.navigationBarBackButtonHidden(true)
}
}
}
and then remove NavigationView from subviews:
struct PageOne: View {
var body: some View {
VStack {
Text("This is page 1")
.font(.system(size: 36, weight: .bold))
.padding(.bottom)
NavigationLink(
destination: PageTwo(),
label: {
VStack {
Text("Go to Page 2")
.font(.system(size: 24, weight: .medium))
.foregroundColor(.white)
.frame(width: 200, height: 50, alignment: .center)
.background(Color.blue)
.cornerRadius(12)
}
})
}
.navigationBarHidden(true)
.navigationBarBackButtonHidden(true)
}
}
struct PageTwo: View {
var body: some View {
VStack {
Text("This is page 2")
.font(.system(size: 36, weight: .bold))
.padding(.bottom)
NavigationLink(
destination: PageOne(),
label: {
VStack {
Text("Go to Page 1")
.font(.system(size: 24, weight: .medium))
.foregroundColor(.white)
.frame(width: 200, height: 50, alignment: .center)
.background(Color.blue)
.cornerRadius(12)
}
})
}
.navigationBarHidden(true)
.navigationBarBackButtonHidden(true)
}
}