SwiftUI .matchedGeometryEffect in List not working

Viewed 115

I am trying to animate an image to full screen from a row in a list and then animate back when I dismiss it. I am trying .matchedGeometryEffect but there are two big problems.

Firstly there is no animation when dismissing.

Secondly, if you first press the row to navigate to the pushed view then come back and try to press the image, it very oddly animates in reverse.

struct ContentView: View {
    
    @Namespace private var animation
    
    @State var showFullScreen = false
    
    var body: some View {
        NavigationView {
            ZStack {
                List {
                    NavigationLink {
                        Text("Hello World")
                    } label: {
                        Button {
                            withAnimation {
                                showFullScreen = true
                            }
                        } label: {
                            Image(uiImage: UIImage(named: "image") ?? UIImage())
                                .resizable()
                                .aspectRatio(contentMode: .fill)
                                .frame(width: 60, height: 60)
                                .matchedGeometryEffect(id: "ident", in: animation)
                        }
                        .buttonStyle(PlainButtonStyle())
                    }
                    .padding()
                }
                if showFullScreen {
                    Image(uiImage: UIImage(named: "image") ?? UIImage())
                        .resizable()
                        .aspectRatio(contentMode: .fit)
                        .matchedGeometryEffect(id: "ident", in: animation)
                }
            }
            .navigationTitle("Geometry Test")
            .toolbar {
                ToolbarItem(placement: .navigationBarLeading) {
                    Button {
                        withAnimation {
                            showFullScreen = false
                        }
                    } label: {
                        Text("Dismiss")
                    }

                }
            }
        }
    }
}
0 Answers
Related