Map become gray when keyboard appear swiftui - swiftui

Question

I'm experience a strange behavior on my app view, as you can see from the attached gif when the keyboard appear the map will become gray.
What can be the issue and possible solution.
here my view code.
struct CreateYourFarm: View {
#ObservedObject var am : AppManager
#State var farmName = ""
#State var adress = "Via guglielmo 3"
#State var nameOwn = ""
#State var cognomeOwn = ""
#State var farmType : FarmType = .Mixed
#Binding var isFirstStart : Bool
#Environment(\.colorScheme) var colorScheme
#State var openMap = false
var body: some View {
GeometryReader { geo in
VStack{
ZStack{
Rectangle()
.foregroundColor(Color("TopBar"))
.frame(width: nil, height: geo.size.height/9, alignment: .center)
HStack{
Image("farm")
.resizable()
.frame(width: 40, height: 40, alignment: .center)
Text("New Farm")
.font(.title)
.foregroundColor(.white)
}
}.edgesIgnoringSafeArea(.top)
TextField("Name of Your Farm", text: $farmName)
.modifier(customViewModifier(roundedCornes: 6, startColor: .green, endColor: .purple, textColor: colorScheme == .dark ? .white : .black))
.disableAutocorrection(true)
.padding()
TextField("Farm Address", text: $adress)
.modifier(customViewModifier(roundedCornes: 6, startColor: .purple, endColor: .green, textColor: colorScheme == .dark ? .white : .black))
.disableAutocorrection(true)
.padding()
TextField("Name of the owner", text: $nameOwn)
.modifier(customViewModifier(roundedCornes: 6, startColor: .green, endColor: .purple, textColor: colorScheme == .dark ? .white : .black))
.disableAutocorrection(true)
.padding()
TextField("Surname of the owner", text: $cognomeOwn)
.modifier(customViewModifier(roundedCornes: 6, startColor: .purple, endColor: .green, textColor: colorScheme == .dark ? .white : .black))
.disableAutocorrection(true)
.padding()
Button {
am.reqLocOneTime()
openMap.toggle()
} label: {
HStack{
Text("Your Farm Location")
Image(systemName: "location.fill")
.foregroundColor(.blue)
}
}
Button {
am.createFarm(farmName: farmName, address: adress, nomeOwn: nameOwn, cognomeOwn: cognomeOwn, field: nil, farmType: farmType) {
// to be fix completition
isFirstStart.toggle()
}
} label: {
Text("SAVE")
.modifier(customViewModifier(roundedCornes: 6, startColor: .purple, endColor: .green, textColor: colorScheme == .dark ? .white : .black))
}
if openMap {
MapView(am: am)
.padding(.horizontal)
}
Spacer()
}
}
}
}
the MapView is a simple UIViewRepresentable
import Foundation
import MapKit
import SwiftUI
struct MapView: UIViewRepresentable {
var am : AppManager
func makeUIView(context: Context) -> some UIView {
return am.map
}
func updateUIView(_ uiView: UIViewType, context: Context) {
}
}

Answer 1

If your app's minimum deployment target is iOS 14 then use below code :
Use Map() intend of UIViewRepresentable view
struct CreateYourFarm: View {
#ObservedObject var am : AppManager
#State var farmName = ""
#State var adress = "Via guglielmo 3"
#State var nameOwn = ""
#State var cognomeOwn = ""
#State var farmType : FarmType = .Mixed
#Binding var isFirstStart : Bool
#Environment(\.colorScheme) var colorScheme
#State var openMap = false
#State private var region = MKCoordinateRegion(center: CLLocationCoordinate2D(latitude: 51.507222, longitude: -0.1275), span: MKCoordinateSpan(latitudeDelta: 0.5, longitudeDelta: 0.5))
var body: some View {
GeometryReader { geo in
VStack{
ZStack{
Rectangle()
.foregroundColor(Color("TopBar"))
.frame(width: nil, height: geo.size.height/9, alignment: .center)
HStack{
Image("farm")
.resizable()
.frame(width: 40, height: 40, alignment: .center)
Text("New Farm")
.font(.title)
.foregroundColor(.white)
}
}.edgesIgnoringSafeArea(.top)
TextField("Name of Your Farm", text: $farmName)
.modifier(customViewModifier(roundedCornes: 6, startColor: .green, endColor: .purple, textColor: colorScheme == .dark ? .white : .black))
.disableAutocorrection(true)
.padding()
TextField("Farm Address", text: $adress)
.modifier(customViewModifier(roundedCornes: 6, startColor: .purple, endColor: .green, textColor: colorScheme == .dark ? .white : .black))
.disableAutocorrection(true)
.padding()
TextField("Name of the owner", text: $nameOwn)
.modifier(customViewModifier(roundedCornes: 6, startColor: .green, endColor: .purple, textColor: colorScheme == .dark ? .white : .black))
.disableAutocorrection(true)
.padding()
TextField("Surname of the owner", text: $cognomeOwn)
.modifier(customViewModifier(roundedCornes: 6, startColor: .purple, endColor: .green, textColor: colorScheme == .dark ? .white : .black))
.disableAutocorrection(true)
.padding()
Button {
am.reqLocOneTime()
openMap.toggle()
} label: {
HStack{
Text("Your Farm Location")
Image(systemName: "location.fill")
.foregroundColor(.blue)
}
}
Button {
am.createFarm(farmName: farmName, address: adress, nomeOwn: nameOwn, cognomeOwn: cognomeOwn, field: nil, farmType: farmType) {
// to be fix completition
isFirstStart.toggle()
}
} label: {
Text("SAVE")
.modifier(customViewModifier(roundedCornes: 6, startColor: .purple, endColor: .green, textColor: colorScheme == .dark ? .white : .black))
}
if openMap {
// MapView(am: am)
// .padding(.horizontal)
Map(coordinateRegion: $region) //Add this and you can customise according your functionally.
}
Spacer()
}
}
}
}
And if your app's minimum deployment target is lower than iOS 14 then replace your code in UIViewRepresentable view:
struct MapView: UIViewRepresentable {
func makeUIView(context: Context) -> MKMapView {
MKMapView()
}
func updateUIView(_ uiView: MKMapView, context: Context) {
}
}
For more information please refer below link for MKMapView()
https://www.morningswiftui.com/2019-07-31-build-mapview-app-with-swiftui/