Transition not applied to entire View

[LJNIC]

When I use a PushView, part of the contents of the View are not treated the same for the transition. They will transition instantly, while the rest of the content transitions normally. It seems to primarily affect "dynamic" content, such as a ForEach. Is there a way around this?

[matteopuc]

Hi @LJNIC would you be able to provide us with a code snippet or a small example? Thank you.

[LJNIC]

Here is an example adapted from the one in the readme. When hitting the PopView, the content in the LazyVGrid appears immediately, instead of transitioning with the rest of the View.

[matteopuc]

Thanks for reporting this interesting issue. The problem is related to the "laziness" of the grid. If you try your example with List or VStack or ScrollView it works as expected. If you, instead, use a lazy view (LazyVGrid or even a simpler LazyVStack) the problem occurs. To be honest I don't know why this is happening, I need to investigate the issue further. At the moment, if you need a workaround, you can just wrap your lazy view inside a not lazy container (for example, inside a VStack or a ScrollView depending on your needs):

struct A: View {
    var body: some View {
        Screen {
            VStack(spacing: 50) {
                Text("Hello World")
                ScrollView {
                    LazyVGrid(columns: [.init(.flexible())]) {
                        ForEach(0..<20) { i in
                            Text("Won't Transition")
                        }
                    }
                }
                PushView(destination: B()) {
                    Text("PUSH")
                }
            }
            .background(Color.green)
        }
    }
}

[LJNIC]

It breaks again when a more complicated grid is used, unfortunately. Here is a snippet from my codebase:

static let gridItem = GridItem(.adaptive(minimum: 50, maximum: 75))
static let columns = [GridItem](repeating: gridItem, count: 9)
    
                    LazyVGrid(columns: Self.columns) {
                        ForEach(0..<9) { y in
                            ForEach(0..<9) { x in
                                Rectangle()
                                   .frame(width: 30, height: 30)
                                   .animation(.spring())
                                }
                            }
                    }

The animation on the individual rectangles also messes with it, though there's still issues when removed. This issue is rather unfortunate, because I love the functionality of the stack.

[matteopuc]

Yes, you're right, it's unfortunate. For some reason, the lazy views break something in the navigation animation. I'll mark this as a bug, I'll try to investigate it as soon as possible. In the meantime, trying to help you find a workaround: do you really need a lazy grid in this case? Something like this would work (I know, it's just a silly workaround):

struct A: View {
    var body: some View {
        Screen {
            VStack {
                ForEach(0..<9) { y in
                    HStack {
                        ForEach(0..<9) { x in
                            Rectangle()
                                .frame(width: 30, height: 30)
                        }
                    }
                }
                PushView(destination: B()) {
                    Text("PUSH")
                }
            }
        }
    }
}