NavigationView doesn't show up correctly in ScrollView - swift

Question

I have encountered this problem during UI building. Previously, I've been asking here about NavigationView and why NavigationLink wasn't working. I fixed this problem with NavigationView at the top of my ScrollView. Now FrameView works just fine: opens and closes it in preview, which means I'm doing it right.
Here's the catch: When I add this LongFrameScrollView to my main view HomeView, it appears in some sort of frame and doesn't open link in full screen.
What am I doing wrong? How to fix that? Providing the code:
// Long frame view
import SwiftUI
struct LongFrameView: View {
var body: some View {
NavigationLink {
PlayerView()
} label: {
ZStack {
Rectangle()
.fill(LinearGradient(gradient: Gradient(colors: [Color(red: 0.268, green: 0.376, blue: 0.587), Color(red: 0.139, green: 0.267, blue: 0.517)]),
startPoint: .leading,
endPoint: .trailing))
.frame(width: 310, height: 62)
.cornerRadius(8)
HStack {
Image("mountains")
.resizable()
.aspectRatio(contentMode: .fill)
.frame(width: 70, height: 62)
.cornerRadius(8, corners: [.topLeft, .bottomLeft])
VStack(alignment: .leading) {
Text("Sense of anxiety")
.font(.custom("Manrope-Bold", size: 14))
.foregroundColor(.white)
Text("11 MIN")
.font(.custom("Manrope-Medium", size: 12))
.foregroundColor(.white)
}
Spacer()
}
}
.frame(width: 310, height: 62)
}
}
}
// Scroll View with LongFrame. Works fine in the preview
struct LongFrameScrollView: View {
let rows = Array(repeating: GridItem(.fixed(70), spacing: 10, alignment: .leading), count: 2)
var body: some View {
NavigationView {
ScrollView(.horizontal, showsIndicators: false) {
LazyHGrid(rows: rows, spacing: 10) {
// PLACEHOLDER UNTIL SERVER IS READY
LongFrameView()
LongFrameView()
LongFrameView()
LongFrameView()
}
}
.padding([.horizontal, .bottom], 10)
}
}
}
var body: some View {
ScrollView(.vertical, showsIndicators: false) {
VStack(alignment: .center) {
///
// Long frame. There is more view, but we'll just ignore them
LongFrameScrollView()
.padding(.bottom)
///
}
.padding(.top, 10)
}
.background(
Image("background2")
.resizable()
.aspectRatio(contentMode: .fill)
)
}
}

Answer 1

The reason why it wasn't working correctly is because it was in TabView. So, in order to work, our TabView must be in NavigationView and we must delete from all child views NavigationView.