SwiftUI NavigationView with transparent background

Question

I Have this view with a Gradient as a background, I want to place another view on top of it, this last view has a NavigationView inside but for some reason I can't make it have a transparent background so I can show off the gradient behind.

Even more strange is the fact that is not even possible to change the NavigationView's background color, I ve looked every where but it seems that I can't find any method that allows me to change color nor to make it transparent

First View( The one with the gradient background I want to display)

ZStack {  // Global Stack for views
    //Background gradient
    VStack {
        LinearGradient(gradient: Gradient(colors: [Color("background2"), Color(.systemBackground)]), startPoint: .top, endPoint: .bottom)
            .frame(height: screenHeight/4)
        Spacer()
    }.background(Color(.systemBackground))

    Subjects()
        
    VStack {
        HStack {    // Topbar with menu-btn and profile-btn
            MenuButton(show: self.$showMenu)
                .disabled(self.showProfile)
            Spacer()
            
            HStack {
                TodayButton(show: self.$showToday)
                ProfileButton(show: self.$showProfile)
            }
        }
        Spacer()
    }
    .padding()
    .padding(.top, screenHeight*0.05)
}

Second View (The one with the NavigationView I want to make transparent)

struct Subjects: View {
    
    let subjects = [
        Subject(id: UUID(), name: "Matematica", color: "ff06f0", grades: [3,7,6.5,5.5]),
        Subject(id: UUID(), name: "Informatica", color: "5506f9", grades: [7,5,4.5,6,9]),
        Subject(id: UUID(), name: "Geografia", color: "f39904", grades: [2,5,10,6.5,9,10,4.5])
    ]
    
    var body: some View {
        
        ZStack(alignment: .bottomTrailing) {
            
            ZStack {
                NavigationView {
                    VStack(spacing: 5) {
                        ScrollView(.vertical, showsIndicators: false) {
                            VStack(spacing: 30) {
                                ForEach(subjects) { subject in
                                    SubjectCard(subject: subject)
                                }
                            }.padding()
                                .padding(.top)
                        }
                    }.navigationBarTitle(Text("Materie"))
                }
            }.offset(y: screenHeight*0.1)
            
            ActionButton(icon: "plus")
        }
    }
}

Answer 1

I had almost the exact same problem on a NavigationView containing Lists and Navigation Links. These appeared white, blocking my gradient background, which was underneath it on the ZStack. I never found an answer that worked, but I did find a workaround.

I solved the problem by adding .blendMode(.darken) on a VStack containing these elements. Darken blendmode will pick the darker of the two views and display it. If your gradient is lighter, you may want to try .blendMode(.lighten). See my code below to see if it would work for you.

NavigationView {
            ZStack {
                LinearGradient(gradient: Gradient(colors: [Color.purple  , Color.green]), startPoint: .topLeading, endPoint: .bottomTrailing)
                    .ignoresSafeArea()
                VStack {
                    SideMenuHeaderView()

                    VStack {
                        List(SideMenuViewModel.MenuItem.allCases) { itemText in

                            NavigationLink(destination: viewModel.getDestination(itemText: itemText.rawValue)) {
                                SideMenuCell(text: itemText.rawValue)
                            }
                        }
                    }.blendMode(.darken)
                    .padding()

                }
            }
        }

Hopefully that works for you as well.