onTapGesture not working when view is inside ScrollView?

Question

I have simple view.

var body: some View {
    NavigationView {
        ZStack {
            ScrollView {
                GeometryReader { geometry in
                    CardView(geometry: geometry)
                    .onTapGesture {
                            print("Tapped")
                        }
                }
            .padding()
            }
        }
    }

When I m tapping on the card, nothing is getting printed. However if I change scrollView to VStack for instance, I instantly get Tapped on the console. What is happening? How can I implement tap gesture on my cards which are inside scrollView?

Answer 1

Your problem is probably on the GeometryReader, try to move it above the scrollView instead of inside

var body: some View {
        NavigationView {
            ZStack {
                Color("light_blue_grey")
                    .edgesIgnoringSafeArea(.all)
                GeometryReader { geometry in
                    ScrollView {
                        Rectangle()
                            .foregroundColor(.blue)
                            .frame(width: geometry.size.width, height: 100)
                            .onTapGesture {
                                print("Tapped!")
                        }
                        
                    }
                    .padding()
                }
            }
        }
    }