Map behaves differently compared to MKMapView

Hey, I have a problem. I was using MKMapView in my app, and in the view where I had a background at the top of the screen, in the example it was Color.red, it extended all the way to the top of the screen. Now, I wanted to switch to the newer Map and I'm seeing an issue because I'm getting a navigation bar that cuts off my color as I indicated in the picture. Does anyone know why this is happening and if there's another way to achieve this?

Steps to reproduce:

  1. Change MapView() to Map() to see difference
import SwiftUI
import MapKit

@main
struct TestAppApp: App {
    var body: some Scene {
        WindowGroup {
            ContentView()
        }
    }
}

struct ContentView: View {
    var body: some View {
        NavigationStack {
            ScrollView(.vertical) {
                Color.red
                    .padding(.top, -200)
                    .frame(height: 200)
                
                MapView().frame(minHeight: 300) // change this line to Map
            }
            .navigationTitle("Title")
            .navigationBarTitleDisplayMode(.large)
        }
    }
}

private typealias ViewControllerRepresentable = UIViewControllerRepresentable

struct MapView: ViewControllerRepresentable {
    typealias ViewController = UIViewController
    
    class Controller: ViewController {
        var mapView: MKMapView {
            guard let tempView = view as? MKMapView else {
                fatalError("View could not be cast as MapView.")
            }
            return tempView
        }
        
        override func loadView() {
            let mapView = MKMapView()
            view = mapView
            
        }
    }
    
    func makeUIViewController(context: Context) -> Controller {
        Controller()
    }
    
    func updateUIViewController(_ controller: Controller, context: Context) {
        update(controller: controller)
    }
    
    func update(controller: Controller) {
    }
}

#Preview {
    ContentView()
}

I got:

I want:

Answered by DTS Engineer in 795857022

You can customize the navigation element in SwiftUI to match what you saw with your representable view using the .toolbarBackground(.hidden, for: .navigationBar) modifier.

— Ed Ford,  DTS Engineer

Accepted Answer

You can customize the navigation element in SwiftUI to match what you saw with your representable view using the .toolbarBackground(.hidden, for: .navigationBar) modifier.

— Ed Ford,  DTS Engineer

Map behaves differently compared to MKMapView
 
 
Q