Hi. Ill paste my code below. The original post was more like a discussion question that is why I did not post any code. Currently I set it to a fixed height @State private var showFilter = false var body: some View { VStack { Button { showFilter.toggle() } label : { Text("show me") } } .sheet(isPresented: $showFilter) {       VStack {         Text("Filter options")           .padding([.bottom], 20)           .presentationDetents([.height(500)])                   ForEach(["All", "2.5+", "3.0+", "4.0+", "5.0+", "6.0+", "7.0+", "8.0+", "9.0+"], id: \.self) { filter in           Button { showFilter.toggle()           } label: {             Text(filter)           }           .padding([.top, .bottom], 8)         }       }     } } The list may be long but I could decide to just remove 5,6,7,8,9 or vice versa that I wish to have the sheet height set based on the contents. I will also check your suggestion.

Hi @claude31 hmm now that you mention it. Could be possible this might be KF's doing. I cleaned the image for better understanding The yellow border is the area where the placeholder is. But when the image is loaded, it is not equal. There are still extra spaces at the bottom. I tried both .fit and .fill but the result is the same. Could it be the yellow area is correct. that the height is adjusted based on the aspect ratio of the width? And that KF is the culprit displaying the downloaded image not fitting it to the area the placeholder was occupying?

@Babyj here is the code. currently, i am doing it the manual way. which for me is not ideal. what do you think? Is there a way to simplify it? the first initial fetch will not have duplicate city name. but the more list fetch for sure will have and that is the part where i wish to merge duplicate city names. import SwiftUI struct CityListView: View {       private let MAX_DISPLAY_PER_FETCH = 20   private var cityUrl: String?         @State private var citiesList: [City]?     @State private var html: String?     @State private var index = 0     @State private var showFooter = true       init(cities: [City]? = nil) {     self.citiesList = cities     setupData()   }       var body: some View {     if let citiesList {       content(citiesList)     }     else {       AsyncView(         operation: { try await getCities() },         content: { cities in           content(cities)         }       )     }   }       func content(_ cities: [City]) -> some View {     return GeometryReader { geometryProxy in       ScrollView {         LazyVStack(alignment: .leading, spacing: 0) {           if cities.count > 0 {             ForEach(cities) { city in               HStack {                 Text(city.header)                   .bold()                   .foregroundColor(.white)                   .textCase(.uppercase)                   .padding(.all, 8)                 Spacer()               }               .background(Color(UIColor(named: PrefTool.instance.getBoolean(Keyword.DARK_MODE) ? "DarkerGray" : "DarkGray")!))                             ForEach(city.businesses) { business in                 Text(business.name)                                   Divider()               }             }           }           else {             Text("Empty List")           }         }         .safeAreaInset(edge: .bottom, spacing: 0) {           if showFooter {             VStack {               Text("Footer")             }             .padding()             .frame(maxWidth: .infinity)             // The background will extend automatically to the edge             .background(Color.green)             .onBecomingVisible {               Task {                 do {                   let moreList = try await getMoreCities(index)                   if moreList.isEmpty { showFooter = false                     citiesList?.append(contentsOf: moreList)                   } else { for more in moreList {                       let index = citiesList?.firstIndex { $0.name == more.name } ?? -1                       if index >= 0 {                         citiesList?[index].businesses.append(contentsOf: more.businesses)                       }                       else {                         cities?.append(more)                       }                     } }                 } catch {                 }               }             }           }         }       }     }   }       func getCities() async throws -> [City] {     let cachedIndex = index     html = try await Web.getRequest(url)     index = index + MAX_DISPLAY_PER_FETCH     self.citiesList = CityParser.getCities(html ?? "", cachedIndex, MAX_DISPLAY_PER_FETCH)     return self.citiesList ?? []   }       func getMoreCities(_ from: Int) async throws -> [City] {     let cachedIndex = index     index = index + MAX_DISPLAY_PER_FETCH     return CityParser.getCities(html ?? "", cachedIndex, MAX_DISPLAY_PER_FETCH)   }     }

@ptit-xav oh yeah, i had tried this. It does indeed work. I guess it is how i structured my list that could be the problem

Hmm.. let me give it a try.

@Claude31, under asyncView there is the part "cities in " which cities is passed to the content function. I wish to set this to the citiesList variable, so i will pass it as content(citiesList) import SwiftUI struct CityListView: View {       private let MAX_DISPLAY_PER_FETCH = 20   private var cityUrl: String?         @State private var citiesList: [City]?     @State private var html: String?     @State private var index = 0     @State private var showFooter = true       init(cities: [City]? = nil) {     self.citiesList = cities     setupData()   }       var body: some View {     if let citiesList {       content(citiesList)     }     else {       AsyncView(         operation: { try await getCities() },         content: { cities in           content(cities)         }       )     }   }       func content(_ cities: [City]) -> some View {     return GeometryReader { geometryProxy in       ScrollView {         LazyVStack(alignment: .leading, spacing: 0) {           if cities.count > 0 {             ForEach(cities) { city in               HStack {                 Text(city.header)                   .bold()                   .foregroundColor(.white)                   .textCase(.uppercase)                   .padding(.all, 8)                 Spacer()               }               .background(Color(UIColor(named: PrefTool.instance.getBoolean(Keyword.DARK_MODE) ? "DarkerGray" : "DarkGray")!))                             ForEach(city.businesses) { business in                 Text(business.name)                                   Divider()               }             }           }           else {             Text("Empty List")           }         }         .safeAreaInset(edge: .bottom, spacing: 0) {           if showFooter {             VStack {               Text("Footer")             }             .padding()             .frame(maxWidth: .infinity)             // The background will extend automatically to the edge             .background(Color.green)             .onBecomingVisible {               Task {                 do {                   let moreList = try await getMoreCities(index)                   showFooter = false                   if !moreList.isEmpty {                     citiesList?.append(contentsOf: moreList)                     showFooter = true                   }                 } catch {                   showFooter = false                 }               }             }           }         }       }     }   }       func getCities() async throws -> [City] {     let cachedIndex = index     html = try await Web.getRequest(url)     index = index + MAX_DISPLAY_PER_FETCH     self.citiesList = CityParser.getCities(html ?? "", cachedIndex, MAX_DISPLAY_PER_FETCH)     return self.citiesList ?? []   }       func getMoreCities(_ from: Int) async throws -> [City] {     let cachedIndex = index     index = index + MAX_DISPLAY_PER_FETCH     return CityParser.getCities(html ?? "", cachedIndex, MAX_DISPLAY_PER_FETCH)   }     }

Was following a tutorial. solution is to palce the render code in updateUIView instead of makeUIView.

@robnotyou quick question. Since MKMapView doesnt require a binding to region, my map shows empty blue (probably in the middle of the sea).  @State private var region = MKCoordinateRegion() MapView(region: region) .edgesIgnoringSafeArea(.all) .onAppear() {     region = ... array of CLLocationCoordinate2D }  This used to work when it was Map since i just had to go $region since the parameter required has to be binding but now it is not. How can it re-render once the region variable is set?  This is my MapView import SwiftUI import MapKit struct MapView: UIViewRepresentable {   var region: MKCoordinateRegion   var polylineCoordinates: [CLLocationCoordinate2D]?   func makeUIView(context: Context) -> MKMapView {     let mapView = MKMapView()     mapView.delegate = context.coordinator     mapView.region = region          if let polylines = polylineCoordinates {       let polyline = MKPolyline(coordinates: polylines, count: polylines.count)       mapView.addOverlay(polyline)     }           return mapView   }   func updateUIView(_ view: MKMapView, context: Context) {        }   func makeCoordinator() -> Coordinator {     Coordinator(self)   } } class Coordinator: NSObject, MKMapViewDelegate {   var parent: MapView   init(_ parent: MapView) {    self.parent = parent   }       func mapView(_ mapView: MKMapView, rendererFor overlay: MKOverlay) -> MKOverlayRenderer {     if let routePolyline = overlay as? MKPolyline {       let renderer = MKPolylineRenderer(polyline: routePolyline)       renderer.strokeColor = UIColor.systemBlue       renderer.lineWidth = 5       return renderer     }     return MKOverlayRenderer()   } }

Google Maps is messy. Too many outdated code. A beginner can't tell which one should be followed. Im going back to MKMapView.

I am merely collecting information if it can be done and if yes, how. Currently I am using an EnvironmentObject to pass data settings to make the view visible or not. I am wondering if my post question is possible as this would offer more flexibility with passing views

forum is lacking feature to delete? That's sad.

var body: some View { Map(coordinateRegion: $region, annotationItems: places) { place in MapMarker(coordinate: place.coordinate) } .edgesIgnoringSafeArea(.all) } Code is simple to show a marker. But that's it. Where does that leave callout?

Well .. turns out the most important part for this is to run Xcode using Rosetta. Post closed.

I wish to understand more from the cause of this. The problem is because of .edgesIgnoringSafeArea(.all) under HStack. Once I removed this, it worked ok. But my curiosity still wonders why it works if in light mode but in dark mode the issue persists.

Thank you both for the tips