Navigation View not working properly in SwiftUI on iPad - ios

Question

I am trying to create an navigation view that works on both iPhone and iPad. Currently I have it working on the iPhone however when running it on the iPad the navigation view doesnt present my main view properly. See below:
This is when I load the app
If I press products (top left) it opens up the products tab.
When I click on a product it goes to this screen
If I click Product 1 (seen on 3rd image) It opens all the details into another navigation bar.
What I am trying to achieve is that image 4 isn't in a navigation tab and instead it is the full screen. I tried removing NavigationView from my code which seems to fix the problem and makes it full screen. However, I then lose the navigation view buttons to allow the user to view other products.
Here is a shortened version my code (without all the text/image details):
var body: some View {
NavigationView {
ScrollView(.vertical, showsIndicators: false) {
VStack(alignment: .center, spacing: 20) {
ProductHeaderView(product: product)
VStack(alignment: .leading, spacing: 15) {
Text(product.title)
.font(.largeTitle)
.fontWeight(.heavy)
.foregroundColor(product.gradientColors[1])
Text(product.headline)
.font(.headline)
.multilineTextAlignment(.leading)
}
.padding(.horizontal, 20)
.frame(maxWidth: 640, alignment: .center)
}
.navigationBarTitle(product.title, displayMode: .inline)
.navigationBarHidden(true)
}
.edgesIgnoringSafeArea(.top)
}
}
}
Thank you in advance for your help :)
EDIT:
Here is the ProductHeaderView.swift code:
var body: some View {
ZStack {
LinearGradient(gradient: Gradient(colors: product.gradientColors), startPoint: .topLeading, endPoint: .bottomTrailing)
TabView{
ForEach(0..<product.images.count, id: \.self) { item in
Image(product.images[item])
.resizable()
.scaledToFit()
.shadow(color: Color(red: 0, green: 0, blue: 0, opacity: 0.15), radius: 8, x: 6, y: 8)
.scaleEffect(isAnimatingImage ? 1.0 : 0.6)
}//: FOR LOOP
}//: TAB VIEW
.tabViewStyle(PageTabViewStyle())
.padding(.vertical, 0)
} //: ZSTACK
.frame(height: 414)
.onAppear(){
withAnimation(.easeOut(duration: 0.5)){
isAnimatingImage = true
}
}
}
Example project: https://github.com/spoax94/productsMinimal.git

Answer 1

Just add this line as a modifier in your NavigationView:
.navigationViewStyle(StackNavigationViewStyle())

Answer 2

As I commented there should be only one NavigationView, so here fixed ProductDetailView with removed redundant NavigationView.
Tested with Xcode 12
struct ProductDetailView: View {
var product: Product
var products: [Product] = productData
#State var showingPreview = false
var body: some View {
ScrollView(.vertical, showsIndicators: false) {
VStack(alignment: .center, spacing: 20) {
ProductHeaderView(product: product)
VStack(alignment: .leading, spacing: 15) {
Text(product.title)
.font(.largeTitle)
.fontWeight(.heavy)
Text(product.headline)
.font(.headline)
.multilineTextAlignment(.leading)
Text("Learn More About \(product.title)".uppercased())
.fontWeight(.bold)
.padding(0)
Text(product.description)
.multilineTextAlignment(.leading)
.padding(.bottom, 10)
}
.padding(.horizontal, 20)
.frame(maxWidth: 640, alignment: .center)
}
.navigationBarTitle(product.title, displayMode: .inline)
.navigationBarHidden(true)
}
.edgesIgnoringSafeArea(.top)
}
}

Answer 3

I figured out the problem. I removed the navigationView and also the 2 lines
.navigationBarTitle(product.title, displayMode: .inline)
.navigationBarHidden(true)
As this was hiding the navigation buttons at the top of my view.