What is the tappable area for onLongPressGesture?

Question

I need to define the tap target for a component so I decide to have a simple example to experiment with. However, in this code below, the tapable area seem to be random to me i.e I can tap on the text hello, outside/inside of red border or outside/inside of yellow border too. Any idea why and how do we know the tappable area using onLongPressGesture ?

struct ContentView: View {
    @State private var isPress: Bool = false
    @State private var count = 0
    [![enter image description here][1]][1]
    var body: some View {
        VStack {
            Text("hello")
                .border(Color.blue)
                .padding(50)
                .border(Color.yellow)
                .frame(width: 200, height: 200)
                .border(Color.red)
                .onLongPressGesture(minimumDuration: .infinity, maximumDistance: 0, perform: {

                }, onPressingChanged: { isPressed in
                    self.isPress = isPressed
                    if isPressed {
                        count += 1
                        print("Pressed ", count)
                    }
                })
            Spacer()
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Answer 1

By default it is only opaque part of view where gesture modifier is applied, if you want different one use contentShape, like

.border(Color.red)
.contentShape(Rectangle())       // << here !!
.onLongPressGesture(minimumDuration: .infinity, maximumDistance: 0, perform: {