How to fix gray bar under List in NavigationView in TabView?

Question

So I am having a problem where just below my list I am having a gray bar that appears and when I click on a cell to go to the other view there is an even bigger gray bar. Here is the code for the List View:

 VStack{
             NavigationView{
                VStack{



                List{
                    ForEach(answersArray.indices, id: \.self) { day in
                        NavigationLink(destination: DetailView(questions: self.answersArray[day].questions, answers: self.answersArray[day].answers, date: self.answersArray[day].dayDone.toString(dateFormat: "MM/dd/yy"))) {


                        HStack{
                            VStack{
                                ForEach(self.answersArray[day].questions.indices) { question in
                                    //Text(question)
                                    Text(self.answersArray[day].questions[question])
                                    .lineLimit(1)
                                        .frame(width: 250, height: 30, alignment: .leading)
                                      //  .padding(.vertical, 5)
                                    //.padding(.bottom)

                                }

                            }
                           // .truncationMode(.tail)
                            //.frame(minWidth: 0, idealWidth: 200, maxWidth: .infinity, minHeight: 0, idealHeight: 50, maxHeight: 75, alignment: .leading)

                            Text(self.answersArray[day].dayDone.toString(dateFormat: "MM/dd/yy"))
                                .frame(minWidth: 0, idealWidth: 50, maxWidth: .infinity, minHeight: 0, idealHeight: 20, maxHeight: 20, alignment: .trailing)
                        }

                        .padding(.horizontal, 5)
                    }

                        //.frame(minWidth: 0, idealWidth: 250, maxWidth: .infinity, minHeight: 0, idealHeight: 50, maxHeight: 100, alignment: .center)
                    }
                    //.colorMultiply(Color("Background Green"))
                  //  .listRowBackground(Color("Background Green"))
                    //.listRowBackground(Color("Background Green"))

                    Button(action: {
                        self.answersArray.append(DailyAnswer(questions: ["Question 1", "Question 2"], answers: ["I am happy", "I am sad"], dayDone: Date().addingTimeInterval(100000), lastWeek: false))
                        self.answersArray.append(DailyAnswer(questions: ["Question 1", "Question 2"], answers: ["I am happy", "I am sad"], dayDone: Date(), lastWeek: false))
                        self.answersArray.append(DailyAnswer(questions: ["Question 1", "Question 2"], answers: ["I am happy", "I am sad"], dayDone: Date(), lastWeek: false))
                    }) {
                        Text("Create cells")
                    }
                    }
                 .navigationBarTitle("Title")
               //.colorMultiply(Color("Background Green"))




                }

             }

             .accentColor(Color("My Gray"))

            }

And here is the code for the separate view:

import SwiftUI

struct DetailView: View {
    var questions : [String];
    var answers : [String];
    var date : String;
    var body: some View {

            //Color("Background Green")
               //.edgesIgnoringSafeArea(.all)

        NavigationView{
            ZStack{
            Color("Background Green")
                   .edgesIgnoringSafeArea(.all)
                ScrollView{
                    VStack{
                        ForEach(questions.indices) { pair in
                            Text(self.questions[pair])
                                .font(.title)
                                .padding()
                            Text(self.answers[pair])
                            .padding()
                                .font(.body)
                            .frame(minWidth: 0, idealWidth: 250, maxWidth: 350, minHeight: 150, idealHeight: 200, maxHeight: .infinity, alignment: .topLeading)
                            .background(
                            RoundedRectangle(cornerRadius: 5)
                                .stroke(Color.black, lineWidth: 1)
                            )

                        }

                    }
                    .padding(.top)
                    .navigationBarTitle("\(date)", displayMode: .inline)
                }

        }
        }
    }
}

Also I know this appears very similar to This Question, but when I implemented the solution on that page it would just change the color of the top Navigation Bar Title and not the gray on the bottom.

Also, this is where I am styling both the Tab Bar and the Navigation Bar

 init() {

       UINavigationBar.appearance().backgroundColor = UIColor(named: "Background Green")
       UITabBar.appearance().isTranslucent = false
       UITabBar.appearance().barTintColor = UIColor.black
       }

Answer 1

Setting UITabBar.appearance().isTranslucent to false will break constraints that NavigationView is relying on.

To fix this, replace these lines of code:

UITabBar.appearance().isTranslucent = false
UITabBar.appearance().barTintColor = UIColor.black

With these:

let tabBarAppearance = UITabBarAppearance()
tabBarAppearance.configureWithOpaqueBackground()
tabBarAppearance.backgroundColor = UIColor.black
UITabBar.appearance().standardAppearance = tabBarAppearance

Answer 2

I see there are many NavigationView in the stack:

 VStack{
             NavigationView{ // << here in first snapshot
                VStack{

and

        NavigationView{ // << here in second snapshot
            ZStack{

and as there no complete code provided there are possible others as well...

Here is a thumb-rule: there must be only one root NavigationView in one view hierarchy chain. So make sure you place one NavigationView as tab-item root view of Past Journals tab (again, assumption based only on provided code).