SwiftUI Navigation Issues, 'Group' not resolving - swiftui

Question

Environment: Xcode 11.1 running on Catalina (19A573a) and building iOS only app.
I have the following code that should be fairly simple.
- I have buttons A - H (8 buttons)
- When I tap on a button I expect to be taken to a respective view (“View A”, “View B”, etc) as they are embedded in a NavigationView.
I run into several issues
- With the code shown tapping button for “View A” does nothing but the other buttons work.
- After re-running a few times tapping on button A will work some times but fail most of the time
- If I disable displaying of all the buttons except button A tapping on button A works.
- If I disable displaying of any single button (again there are 8 buttons, A-H) then tapping on the first button works.
I understand there is a technical limit in VStack of more than 10 view and I tried the suggestion made here:
https://www.hackingwithswift.com/quick-start/swiftui/how-to-group-views-together
But that does not work
I have tried variations of putting the buttons in the list and that doesn’t work.
Anyone who wants to test can create a new project and copy the entire code contents into the ContentView.swift file and run.
import SwiftUI
struct ContentView: View {
var body: some View {
NavigationView {
HStack {
Spacer()
VStack {
Spacer()
Group {
NavigationLink(destination: ViewA()) {
BasicButton(buttonName: "View A", buttonColor: .orange)
}
NavigationLink(destination: ViewB()) {
BasicButton(buttonName: "View B", buttonColor: .red)
}
NavigationLink(destination: ViewC()) {
BasicButton(buttonName: "View C", buttonColor: .green)
}
NavigationLink(destination: ViewD()) {
BasicButton(buttonName: "View D", buttonColor: .blue)
}
}
Group {
NavigationLink(destination: ViewE()) {
BasicButton(buttonName: "View E", buttonColor: .pink)
}
NavigationLink(destination: ViewF()) {
BasicButton(buttonName: "View F", buttonColor: .gray)
}
NavigationLink(destination: ViewG()) {
BasicButton(buttonName: "View G", buttonColor: .purple)
}
NavigationLink(destination: ViewH()) {
BasicButton(buttonName: "View H", buttonColor: .yellow)
}
}
Spacer()
}
Spacer()
}
.background(Color.black).edgesIgnoringSafeArea(.all)
}
}
}
struct BasicButton: View {
var buttonName: String
var buttonColor: Color
var body: some View {
Text(buttonName)
.font(.title)
.multilineTextAlignment(.center)
.foregroundColor(.white)
.frame(width: 300, height: 60)
.background(buttonColor)
.cornerRadius(5)
.padding()
}
}
struct ViewA: View {
var body: some View {
Text("View A").font(.largeTitle)
}
}
struct ViewB: View {
var body: some View {
Text("View B").font(.largeTitle)
}
}
struct ViewC: View {
var body: some View {
Text("View C").font(.largeTitle)
}
}
struct ViewD: View {
var body: some View {
Text("View D").font(.largeTitle)
}
}
struct ViewE: View {
var body: some View {
Text("View E").font(.largeTitle)
}
}
struct ViewF: View {
var body: some View {
Text("View F").font(.largeTitle)
}
}
struct ViewG: View {
var body: some View {
Text("View G").font(.largeTitle)
}
}
struct ViewH: View {
var body: some View {
Text("View H").font(.largeTitle)
}
}

Answer 1

When you open Debug View Hierarchy you will notice that View A is completely obstructed by a invisible NavigationBar, which even though it is invisible is blocking all the touches from reaching View A.