how to use TapGestureHandler on Class Components - react-native

Question

I'm trying to add a tap gesture to the render card of react-native-deck-swiper using the TapGestureHanlder from react-native-reanimated.
Currently, it works when tapping the red zone outside the swiper, but I want to tap the picture and get the x position where I tapped.
This is the code of the red zone, there I'm calling a class component in which I'm using the deck-swiper with some extra functions.
const onSingleTapEvent = (event) => {
if (event.nativeEvent.state === State.ACTIVE) {
alert('Hey single tap!');
}
};
return (
<GestureHandlerRootView style={{ zIndex: 10 }}>
<TapGestureHandler onHandlerStateChange={onSingleTapEvent}>
<AnimatedView style={styles.container}>
<ImageSwiperDeck
index={index}
listOfAssetsWithinTheAlbum={listOfAssetsWithinTheAlbum}
moveImageToTrashBin={moveImageToTrashBin}
keepImageInAlbum={keepImageInAlbum}
/>
</AnimatedView>
</TapGestureHandler>
</GestureHandlerRootView>
);
};
const styles = StyleSheet.create({
container: {
height: 560,
width: 500,
zIndex: 10,
backgroundColor: 'red',
},
});
export default ImageSwiper;
This is the deck-swiper code which works fine.
return (
<Swiper
ref={(swiper) => {
this.swiper = swiper;
}}
cards={this.props.listOfAssetsWithinTheAlbum}
cardIndex={this.props.index}
renderCard={this.Card}
backgroundColor={'transparent'}
onSwipedLeft={this.deleteImage}
onSwipedRight={this.keepImage}
cardVerticalMargin={10}
stackSize={5}
stackScale={20}
stackSeparation={5}
animateOverlayLabelsOpacity
animateCardOpacity
disableTopSwipe
disableBottomSwipe
overlayLabels={{
left: {
title: 'DELETE',
style: {
label: {
backgroundColor: colors.red,
borderColor: colors.red,
color: colors.white,
borderWidth: 1,
fontSize: 24,
},
wrapper: {
flexDirection: 'column',
alignItems: 'flex-end',
justifyContent: 'flex-start',
marginTop: 20,
marginLeft: -20,
},
},
},
right: {
title: 'KEEP',
style: {
label: {
backgroundColor: colors.blue,
borderColor: colors.blue,
color: colors.white,
borderWidth: 1,
fontSize: 24,
},
wrapper: {
flexDirection: 'column',
alignItems: 'flex-start',
justifyContent: 'flex-start',
marginTop: 20,
marginLeft: 20,
},
},
},
}}
/>
);