I'm trying to use the react-native-gesture-handler library to add double click event when a picture is tapped.
the issue I'm running into is the onGestureEvent is never being triggered and onHandlerStateChange is being triggered twice even if I've only clicked it once. on one click it will trigger show the alert fade away then show the alert again.
the second part of this is my number of taps is 2 so it shouldn't event trigger on one tap. this is all wrapped within a flatlist if that matters.
renderItem={({ item }) => {
return (
<Fragment>
{this.state.isExpandable && (
<TapGestureHandler
onHandlerStateChange={this.showImageOverlay}
onGestureEvent={this.finalEvent}
numberOfTaps={2}
>
<Image
style={{ ...collapsibleImagesStyles.Image, height: 540 / 4, width: 540 / 2.2 }}
source={{ uri: item }} />
</TapGestureHandler>
)
}
</Fragment>
)
}}
keyExtractor={(item, index) => index.toString()}
private finalEvent = (event: TapGestureHandlerGestureEvent) => {
if (event.nativeEvent.state = State.BEGAN)
alert(JSON.stringify('FINAL BEGAN'))
if (event.nativeEvent.state = State.ACTIVE)
alert(JSON.stringify('FINAL ACTIVE'))
if (event.nativeEvent.state = State.END)
alert(JSON.stringify('FINAL END'))
}
private showImageOverlay = (event: TapGestureHandlerStateChangeEvent) => {
if (event.nativeEvent.state = State.ACTIVE)
alert(JSON.stringify('ACTIVE'))
}