SwiftUi - Weird navigation bar background color with Map in view

Question

I have two tabs: one is a map inside a List and the other is a simple setting view. This is the code for both:

LocationView.swift

import SwiftUI
import MapKit

struct Locations: View {
   var body: some View {
       NavigationStack{
           List{
               Section{
                   Map(){
                   }
              }
          }
        .navigationTitle("Locations")
        .navigationBarTitleDisplayMode(.automatic)
      }
  }
}

SettingsView.swift

import SwiftUI

struct SettingsView: View {
  var body: some View {
    NavigationStack{
       List{
         Section{
          ....
         }
       }
    }
  }
} 

Now, problem is that I don't understand why with the same very code, the navigation (and tab bar) background looks like this:

while my SettingView navigation bar looks like this:

I would like to have both with a solid gray color like the one in the SettingView. Is it the map that makes the navigation and tab bar look like blurred?

Thanks.

UPDATE:

I'd love both views to have the default color scheme for a List like this one:

Hiding the navigation bar won't do the trick. On scroll makes it disappear and it's not what I'm looking for.

Changing the background color works but makes me lose the "translucent" effect when the navbar collapses to inline mode.

UPDATE 2

The problem is definitely the map. Removing it makes the two view look the same. Looks like the map is stretching behind all the view in the background, even if it's inside a List -> Section

Answer 1

Method 0

Looks like the map is stretching behind all the view in the background

So you can clip the map to prevent that like:

Map(){ }
    .clipped()

---

Method 1

You can make the navigation bar have a custom color like:

.toolbarBackground(.yellow, for: .navigationBar)

or just make it not-translucent somewhere in the app like:

init() {
    UINavigationBar.appearance().isTranslucent = false
}

var body: some View { ,,, }

_{💡 Method 1 is preferred over the method 2}

Answer 2

iOS 18+

Try setting the .toolbarBackgroundVisibility to .automatic. This is what you might expect to be the default, but it seems that the Map is making it permanently .visible instead.

// Locations

NavigationStack {
    List {
        Section {
            Map() {
            }
        }
    }
    .navigationTitle("Locations")
    .navigationBarTitleDisplayMode(.automatic)
    .toolbarBackgroundVisibility(.automatic, for: .navigationBar) // 👈 here
    .toolbarBackgroundVisibility(.automatic, for: .tabBar) // 👈 and here
}

iOS 16/17

Use toolbarBackground instead of toolbarBackgroundVisibility.