I have a problem, and I am struggling to articulate it.

I have a view that is a list of objects (posts) stored in cloudkit. these include images 1 > many. In the main list view I have a lazy Hgrid showing thumbnails (imageView view).

I have an edit post view that also shows the same Hgrid with thumbnails (imageView view)

taping an image in the hgrid shows a fullscreen image (imageView view)

My question is, when loading the list view, the underlying imageviews are also created, however 3 for each image are created which causes memory usage to spike ( sixe of images X 3) which gets out of hand.

is there a way to force only 1 image view to be instanciated?

The way I have done it in one project. Is when a user taps a thumbnail imager then it enlarge to a view on top then tap to disapear again This is my PopOverView

/// Allows user to tap on Image to enlarge it.
struct PopUpImageView: View {
    let image: UIImage
    @Binding var selectedImage: UIImage?
    @Namespace var namespace

    var body: some View {
        ZStack {
                Image(uiImage: image)
                    .interpolation(.high)
                    .resizable()
                    .scaledToFit()
                    .cornerRadius(10)
                    .frame(width: 300, height: 300)
                    .matchedGeometryEffect(id: image, in: namespace)
                    .padding(25)
                    .background(.thickMaterial)
                    .cornerRadius(10)
            }
        }
        .accessibilityHidden(true)
        .accessibility(label: Text("User Photo"))
        .zIndex(100)
        .onTapGesture {
            withAnimation {
                selectedImage = nil
            }
        }
    }
}

This is my Image Row of thumbnails

/// A View that shows selected image in a GridRow
struct ImageView: View {
    let images: [UIImage]
    let imageSize: CGFloat = 130

    @Binding var selectedImage: UIImage?
    @Namespace var namespace

    private var imageRow: [GridItem] {
        [GridItem(.fixed(imageSize))]
    }

    var body: some View {
        ScrollView(.horizontal, showsIndicators: false) {
            LazyHGrid(rows: imageRow) {
                ForEach(images, id: \.self) { image in
                    if selectedImage == image {
                        Color.clear
                            .frame(width: imageSize, height: imageSize)
                    } else {
                        Image(uiImage: image)
                            .resizable()
                            .frame(width: imageSize, height: imageSize)
                            .cornerRadius(10)
                            .onTapGesture {
                                withAnimation(.interactiveSpring(response: 0.5, dampingFraction: 0.9)) {
                                    selectedImage = image
                                }
                            }
                            .matchedGeometryEffect(id: image, in: namespace)
                            .accessibilityHidden(true)
                            .accessibility(label: Text("User Photo"))
                    }
                }
            }
        }
    }
}

Might help and give you some ideas

Sorry for not replying. I have been a bit busy with christmas etc.

that looks like a very nice idea, and is something I wanted to move towards.

Thank you and thank you for the code example, it's exactly what I need!