SwiftUI - contextMenu on LazyVGrid cell causing animation crash when Map present - animation

Question

I have a LazyVGrid and a NavigationBarItem button that changes the number of columns. It cycles through 1, 2, 3 then back to 1, etc. I use the .animation(.default) modifier to animate this change. When there is just one column I use a different cell structure that includes a small Map element. I have a contextMenu that works fine for 2 and 3 columns but crashes instantly when used on the single-column cell.
AnimationError[2652:855376] [Unknown process name] CGImageCreate: invalid image alphaInfo: kCGImageAlphaNone. It should be kCGImageAlphaNoneSkipLast
This crash occurs only on my iPhone 11 Pro real device, the simulators handle it fine. If I remove the animation, all is good.
A compilable, stripped-down version:
import SwiftUI
import CoreLocation
import MapKit
struct HillMO: Identifiable {
let id = UUID()
let name: String
let latitude: Double
let longitude: Double
}
struct ContentView: View {
#State private var gridLayout: [GridItem] = [GridItem(), GridItem(), GridItem()]
var body: some View {
NavigationView {
VStack {
GeometryReader { geometry in
ScrollView {
LazyVGrid(columns: gridLayout, alignment: .center, spacing: 8) {
ForEach(hills) { hill in
Cell(hill: hill, width: geometry.size.width, columns: gridLayout.count)
.contextMenu {
Button(action: { }) { Label("Bingo", image: "eyeglasses") }
Button(action: { }) { Label("Bungo", image: "hourglass") }
}
}
}.padding(5)
.animation(.default)
}
}
}
.navigationBarTitle("Bagger")
.navigationBarItems(
trailing: HStack {
Button(action: {
gridLayout = Array(repeating: .init(.flexible()), count: gridLayout.count % 3 + 1)
}) {
Image(systemName: "circle.grid.3x3")
}
}
)
}
}
let hills = [ HillMO(name: "un", latitude: 0.0, longitude: 0.0),
HillMO(name: "dau", latitude: 1.0, longitude: 1.0),
HillMO(name: "tri", latitude: 2.0, longitude: 2.0),
HillMO(name: "pedwar", latitude: 3.0, longitude: 3.0),
HillMO(name: "pump", latitude: 4.0, longitude: 4.0),
HillMO(name: "chwech", latitude: 5.0, longitude: 5.0)
]
}
My Cell and CellMap Views:
struct Cell: View {
var hill: HillMO
var width: CGFloat
var columns: Int
var body: some View {
Group {
if columns != 1 {
ZStack {
Rectangle()
Text(hill.name).foregroundColor(.white)
}
} else {
ZStack {
Rectangle()
HStack {
Text(hill.name).foregroundColor(.white)
Spacer()
CellMap(coordinateRegion: MKCoordinateRegion(center: CLLocationCoordinate2D(latitude: hill.latitude, longitude: hill.longitude),
latitudinalMeters: 300000,
longitudinalMeters: 300000))
.frame(width: (width / CGFloat(columns)) * 0.24, height: (width / CGFloat(columns)) * 0.24)
.clipShape(Circle())
}
}
}
}
.frame(height: (width / CGFloat(columns)) * (columns == 1 ? 0.25 : 1.25))
}
}
struct CellMap: View {
#State var coordinateRegion: MKCoordinateRegion
var body: some View {
Map(coordinateRegion: $coordinateRegion)
}
}

Answer 1

Try to limit your animation only to exact, your, state value
}.padding(5)
.animation(.default, value: gridLayout)
and this will require to make HillMO equatable
struct HillMO: Identifiable, Equatable {
static func == (lhs: Self, rhs: Self) -> Bool {
lhs.id == rhs.id
}
let id = UUID()
let name: String
let latitude: Double
let longitude: Double
}