SwiftUI Hero Animation (matchedGeometryEffect) Problem - swiftui

Question

I've been looking at different tutorials online trying to piece together a "simple" hero animation. The images are in a LazyHGrid and when tapped, should expand up to the second image. I tried to condense and simplify the code below as much as possible.
I have gotten it to work outside of the grid with just one image.
import SwiftUI
struct Item: Hashable {
let id = UUID()
var text = "TEXT"
}
struct ContentView: View {
var items = [Item(text: "One"), Item(text: "Two"), Item(text: "Three"), Item(text: "Four"), Item(text: "Five"), Item(text: "Six"), Item(text: "Seven"),Item(text: "Eight"),Item(text: "Nine")]
#State private var isShowingDetail = false
#State private var selectedItemID: UUID? = nil
#Namespace var animation: Namespace.ID
var body: some View {
ZStack {
ScrollView(.horizontal) {
LazyHGrid(rows: [GridItem(.flexible())], spacing: 10, content: {
ForEach(items,id: \.id, content: { item in
VStack {
Image("Image2")
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: 200)
.matchedGeometryEffect(id: item.id, in: animation)
.onTapGesture {
withAnimation(.spring()){
self.selectedItemID = item.id
isShowingDetail.toggle()
}
}
Text(item.text)
}
})
})
}
if isShowingDetail {
VStack {
Image("Image1")
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: 300)
.matchedGeometryEffect(id: selectedItemID, in: animation)
.onTapGesture {
withAnimation(.spring()){
selectedItemID = nil
isShowingDetail.toggle()
}
}
Spacer()
}
}
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}

Answer 1

It looks like your selectedItemID and isShowingDetail are fighting each other (and are redundant, since selectedItemID is an optional. I've commented out a couple lines and it seems to be working:
struct ContentView: View {
#State var items = [Item(text: "One"), Item(text: "Two"), Item(text: "Three"), Item(text: "Four"), Item(text: "Five"), Item(text: "Six"), Item(text: "Seven"),Item(text: "Eight"),Item(text: "Nine")]
//#State private var isShowingDetail = false // <----- here
#State private var selectedItemID: UUID? = nil
#Namespace var animation: Namespace.ID
var body: some View {
ZStack {
ScrollView(.horizontal) {
LazyHGrid(rows: [GridItem(.flexible())], spacing: 10, content: {
ForEach(items,id: \.id, content: { item in
VStack {
Image("0")
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: 200)
.matchedGeometryEffect(id: item.id, in: animation)
.onTapGesture {
withAnimation(.spring()){
self.selectedItemID = item.id
//isShowingDetail.toggle() // <----- here
}
}
Text(item.text)
}
})
})
}
if let selectedItemID = selectedItemID { // <----- here
VStack {
Image("1")
.resizable()
.aspectRatio(contentMode: .fit)
.frame(width: 300)
.matchedGeometryEffect(id: selectedItemID, in: animation)
.onTapGesture {
withAnimation(.spring()){
self.selectedItemID = nil
//isShowingDetail.toggle() // <----- here
}
}
Spacer()
}
}
}
}
}
The one caveat is it seems possible to get in a funny state if you tap the original image again while the detail image is shrinking back down. Not sure if it's a bug with the code or a bug with matchGeometryEffect itself.