Map become gray when keyboard appear 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) {
        
    }
}

Priyank javia · Answer 1 · 2022-03-10T13:03:46.293

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/

Map become gray when keyboard appear swiftui

1 Answers1