Why is the navigation bar so tall - swift

Question

Im running Xcode 14 beta 6 and this page is a link from my home page and the nav bar is stacking like there is two.
If you don't understand here's some images
and here's my code:
import SwiftUI
struct ProductsLink: View {
#Environment(\.presentationMode) var presentationMode: Binding<PresentationMode>
var btnBack : some View { Button(action: {
self.presentationMode.wrappedValue.dismiss()
}) {
HStack {
Image(systemName: "arrow.backward.circle")
.aspectRatio(contentMode: .fit)
.foregroundColor(Color("LaunchText"))
}
}
}
var body: some View {
Products(text: "All Products")
.navigationBarItems(leading: btnBack)
.navigationBarBackButtonHidden()
}
}
struct ProductsLink_Previews: PreviewProvider {
static var previews: some View {
ProductsLink()
}
}
contentview:
import SwiftUI
struct ContentView: View {
#State private var selection = 1
init() {
UITabBar.appearance().backgroundColor = .systemBackground
}
var body: some View {
TabView(selection: $selection {
Home()
.tabItem { Label("Home", systemImage: "house.fill") }.tag(1)
About()
.tabItem { Label("About", systemImage: "person.crop.circle") }.tag(2)
Products()
.tabItem { Label("Products", systemImage: "bag.fill") }.tag(3)
Gallery()
.tabItem { Label("Gallery", systemImage: "photo.on.rectangle") }.tag(4)
Contact()
.tabItem { Label("Contact", systemImage: "phone.bubble.left.fill") }.tag(5)
}
.accentColor(Color("Green Power Logo Colour"))
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
products:
struct Products: View {
var text = "Products"
var body: some View {
NavigationView {
ScrollView {
AllProductCards
NavigationLink(destination: ContactForm()) {
HStack {
Text("Intrested. Contact Form \(Image(systemName: "arrow.forward.circle"))")
.foregroundColor(.white)
} .frame(width: 250 ,height: 50)
.background(Color("Dark Green"))
.cornerRadius(7)
}
Footer()
}
.navigationTitle(text)
}.navigationViewStyle(StackNavigationViewStyle())
}
}
struct Products_Previews: PreviewProvider {
static var previews: some View {
Products()
}
}

Answer 1

First one thing, in the ContentView, you are referencing the Products view. If look into the Products view, there is an AllProductCards reference to (I guess) another view. I don't know what's in the view. My assumption would be, it is a List/VStack with NavigationLinks to the ProductsLinks. The ProductsLinks itself are referencing to Products. Is that correct, or what is AllProductsLinks doing? If my assumption is correct, you are looping the products. Since the NavigationView() is part of the Products, that causes a nested NavigationView() into another NavigationView()
I'd think about the looping situation and change that.
For now and here it is "fixed" if you pull out the NavigationView(). You would have to moved the NavigationView() from the Products view into the ContentView like below. So even if the Products view is looped, you have just one NavigationView().
Again, I implemented the AllProductCards according to my assumption.
The updated ContentView (Products nested into NavigationView()):
import SwiftUI
struct ContentView: View {
#State private var selection = 1
init() {
UITabBar.appearance().backgroundColor = .systemBackground
}
var body: some View {
TabView(selection: $selection {
Home()
.tabItem { Label("Home", systemImage: "house.fill") }.tag(1)
About()
.tabItem { Label("About", systemImage: "person.crop.circle") }.tag(2)
NavigationView {
Products()
}
.tabItem { Label("Products", systemImage: "bag.fill") }.tag(3)
Gallery()
.tabItem { Label("Gallery", systemImage: "photo.on.rectangle") }.tag(4)
Contact()
.tabItem { Label("Contact", systemImage: "phone.bubble.left.fill") }.tag(5)
}
.accentColor(Color("Green Power Logo Colour"))
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
The updated Products view (removed NavigationView()):
struct Products: View {
var text = "Products"
var body: some View {
ScrollView {
AllProductCards()
NavigationLink(destination: ContactForm()) {
HStack {
Text("Intrested. Contact Form \(Image(systemName: "arrow.forward.circle"))")
.foregroundColor(.white)
} .frame(width: 250 ,height: 50)
.background(Color("Dark Green"))
.cornerRadius(7)
}
Footer()
}
.navigationTitle(text)
}
}