Images overlapping over the tabview

[ANSPATEL]

I have a screen that is displaying a few images. It also has a tab bar. The images in the last row are supposed to go below the tab bar but instead the overlap

[mikaelacaron]

Can you post your code for how the image grid is created?

Paste your code in as text, rather than providing a screenshot.

To format the code nicely, place 3 back-ticks ``` on the line above your code and 3 back-ticks ``` on the line below your code. The 3 back-ticks must be the ONLY characters on the line. The back-tick character is located on the same keyboard key as the tilde character ~ (which is located below the Esc key on a US English keyboard). You can also highlight an entire code block and click the </> button on the toolbar to wrap the block for you.

This also makes it easier for anyone assisting as they can copy the code and carry out some testing.

[ANSPATEL]

Here is the code:

import SwiftUI

struct GalleryView: View {
    
    @State var photoData: [String] = []
    @State var sheetVisible: Bool = false
    var dataService = DataService()
    
    var body: some View {
        VStack(alignment: .leading) {
            Text("Gallery")
                .font(.largeTitle)
                .bold()
            
            GeometryReader { proxy in
                ScrollView(showsIndicators: false) {
                    LazyVGrid(columns: [GridItem(spacing: 10),
                                        GridItem(spacing: 10),
                                        GridItem(spacing: 10)],
                              spacing: 10) {
                        ForEach(photoData, id: \.self) {pic in
                            Image(pic)
                                .resizable()
                                .aspectRatio(contentMode: .fill)
                                .frame(maxWidth: (proxy.size.width-20)/3)
                                .clipped()
                                .onTapGesture {
                                    sheetVisible = true
                                }
                        }
                    }
                }
            }
        }
        .padding(.horizontal)
        .onAppear {
            photoData = dataService.getImages()
        }
        .sheet(isPresented: $sheetVisible, content: {
            PhotoView()
        })
    }
}

#Preview {
    GalleryView()
}

[mikaelacaron]

You should be able to accomplish the same with with just the Grid and not need the GeometryReader

Also you could try to add a .clipped() modifier to the ScrollView

[ANSPATEL]

Adding .clipped works. Thank you!