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
       }

May not be related with the issue, but why not removing top parent `VStack` and the one just inside the `NavigationView` — Enes Karaosman, May 09 '20 at 22:02
I ended up just avoiding this method completely and have been trying to recreate this bug recently, but it did not work. The only thing I can think of that would have fixed it is that in the most recent Xcode update they either limited cases where this happened, or removed it altogether. Has anybody has this bug since the last update that allowed simulated devices to go up to 13.4.1? — Ben O, May 15 '20 at 04:11

score 4 · Accepted Answer · answered May 10 '20 at 05:27

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).

score 3 · Answer 2 · answered Sep 20 '20 at 10:20

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

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

2 Answers2

Linked