Placing TabView inside NavigationView makes header transparent

Question

TabView worked fine for me before i added NavigationView around it. Here's a normal behaviour

A problem arises when i add NavigationView around my TabView - when scrolling I see "test" in front of black rectangle.

I tried setting

UINavigationBar.appearance().backgroundColor

to some opaque color but it just draws another rectangle in front of everything.

Is there any way to make that black rectangle opaque when using NavigationView around TabView?

Oh, one more thing.. i tried removing

.edgesIgnoringSafeArea(.top)

which solves the problem but huge white space appears in top area:

import SwiftUI

struct ContentView: View {
    
    let tabData = [
        TabItem(menuTitle: Text("item 1"), menuImage: Image(systemName: "heart.fill"), bodyHeadline: Text("Postnatal recovery"), bodyMeta: Text(""), tag: 1),
        TabItem(menuTitle: Text("item 2"), menuImage: Image(systemName: "heart.fill"), bodyHeadline: Text("Weight loss"), bodyMeta: Text(""), tag: 2),
    ]
    
    var body: some View {
        NavigationView {
            ZStack {
                TabView {
                    ForEach(tabData) { tabItem in
                        VStack {
                            VStack {
                                Rectangle()
                            }
                            .frame(height: 90)
                            .background(Color.yellow)
                            
                            ScrollView {
                                LazyVStack(spacing: 0) {
                                    ForEach(0...100, id:\.self) { val in
                                        ZStack {
                                            Text("test")
                                                .font(.system(size: 128))
                                        } // ZStack
                                        .background(Color.white)
                                    } // ForEach
                                }
                            }
                            .background(Color.blue)
                            
                        }
                        
                        .tabItem {
                            tabItem.menuImage
                            tabItem.menuTitle
                                .foregroundColor(Color.red)
                        }
                        .edgesIgnoringSafeArea(.top)
                    } // ForEach
                    
                } // TabView
            } // ZStack
        } // NavigationView
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

struct TabItem: Identifiable {
    var id = UUID()
    var menuTitle: Text
    var menuImage: Image
    var bodyHeadline: Text
    var bodyMeta: Text
    var tag: Int
}

Answer 1

adding

.navigationBarHidden(true).navigationBarTitle("")

made everything work smoothly