how to use TapGestureHandler on Class Components

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,
                            },
                        },
                    },
                }}
            />
        );