Tappable Image in a ZStack with a Button - button

Question

I have a ZStack with an image and a close button overlaying it. I cannot make the image tappable with the button overlaying it.
ZStack(alignment: .topTrailing) {
NetworkImage(url: article.imageURL)
.aspectRatio(contentMode: .fill)
.frame(width: UIScreen.main.bounds.width,
height: UIScreen.main.bounds.height * 0.5)
.scaleEffect(scrollViewContentOffset < 0 ?
1 + (-scrollViewContentOffset * 0.005)
: 1,
anchor: .bottom)
Button(action: {
self.presentationMode.wrappedValue.dismiss()
}){
Image(systemName: "xmark.circle.fill")
.foregroundColor(.init(white: 0.9)).padding([.top, .trailing])
.font(.system(size: topCloseButtonSize))
.offset(y: scrollViewContentOffset < 0 ?
.extraLarge + scrollViewContentOffset :
.extraLarge)
}
}
I have tried to add a tap gesture to the Image itself but that disables the tapability on the close button. How can I keep the ZStack in tact and have both the image and close button tappable?

Answer 1

Try adding an onTapGesture modifier to the NetworkImage (Rectangle in the code beloew) - it seems to work as expected then. I simplified the NetworkImage to use a standard Rectangle, but the tap results should be the same. Tested on Xcode 12.1.
ZStack(alignment: .topTrailing) {
Rectangle() // Use NetworkImage here - simplified to Rectangle for testing
.aspectRatio(contentMode: .fill)
.frame(width: UIScreen.main.bounds.width,
height: UIScreen.main.bounds.height * 0.5)
.onTapGesture(count: 1, perform: {
print("RECTANGLE TAPPED!")
})
Button(action: {
print("CLOSE TAPPED")
}){
Image(systemName: "xmark.circle.fill")
.foregroundColor(.init(white: 0.9)).padding([.top, .trailing])
}
}