Layout breaks when Grid is placed inside a ScrollView that is not within a NavigationView

[Patricio Cano]

First of all, thank you for this library.

I've been using it to develop my app, and it works really great when everything is inside a NavigationView, but I want to design the transitions between my views in a different way.

As the title mentions, they layout of the Grid completely breaks when it is placed within a ScrollView that is not itself within a NavigationView. If you drop the scroll view, and place the Grid within a VStack there are no layout issues, but the content overflows.

The funny thing is, that on redraw of the view, the layout fixes itself. So I think it has something to do with how GeometryReader works within a ScrollView the first time it appears.

[Alexander Young]

@supernova32 would you mind posting the code of the view that is using Grid? (you can exclude not relevant parts just how it is nested and configured)

[Patricio Cano]

@ay42 sure, here is a snippet:

 var body: some View {
        ZStack {
            VStack {
                ScrollView(.vertical, showsIndicators: false) {
                    LogoView()
                        .padding(.top, 10.0)
                    
                    Text("Featured Content")
                        .font(.subheadline)
                        .fontWeight(.semibold)
                        .padding(.top, 10)
                    
                    FeaturedMedia()
                    
                    Grid(contentData) { content in
                        if content.video {
                            NavigationVideoView(content)
                                .onTapGesture {
                                    self.envData.content = content
                                    self.showDetailView = true
                                }
                        } else {
                            WebImage(url: content.mediaUrl)
                                .renderingMode(.original)
                                .resizable()
                                .scaledToFit()
                                .cornerRadius(12)
                                
                        }
                    }
                    .padding(.all, 5.0)
                    .animation(.easeInOut)
                }
                .gridStyle(
                    StaggeredGridStyle(.vertical, tracks: 2, spacing: 6)
                )                
            }            
        }
    }

With the view composed like that, the grid renders on top of each other, so it ends up showing only one element. If I wrap the ScrollView in a NavigationView it works as expected.

I tried my hand at changing the code that renders the Grid with this commit: suprnova32@505d5db and it fixed my issue. I'm sure that is not the correct way to do it, though 😅