How to cancel onPress in React Native - react-native

Question

I have a TouchableHighlight zone in my component.
I would like to trigger _onPress method for a quick tap, and _onLongPress for a longer tap.
This works, but _onPress method is always triggered when I release the tap.
How can I do to trigger only one of these methods depending on short tap or long tap ?
class MyClass extends React.Component {
_onPress = () => {
console.log("Press")
}
_onLongPress = () => {
console.log("LongPress")
}
render() {
return (
<TouchableHighlight
style={styles.touchable}
underlayColor="white"
delayPressIn={2000}
onPress={this._onPress}
onPressIn={this._onLongPress}
>
<View style={styles.box}>
<Image style={styles.logo} source={this.state.logo.id} />
</View>
</TouchableHighlight>
)
}
}
Many thanks :)

Answer 1

According to the doc, you can pass both onPress and onLongPress props directly to the TouchableHighlight component, since it inherits all the props available from TouchableWithoutFeedback.
<TouchableHighlight
onPress={this._onPress}
onLongPress={this._onLongPress}
delayLongPress={2000}
...
>
...
</TouchableHighlight >
Just one of the two events will be triggered.
Here you can try an example of what I'm talking about.

Answer 2

TouchableHighlight inherits all props from TouchableWithoutFeedback ,rather than using onPressIn which you are trying to use in your code, you can use long and short press. So whatever you are trying will not work in this case.
You can use both TouchableHighlight TouchableWithoutFeedBack, aa both have the same props. It
have both onLongPress for long press and onPress for short press funtionality which you can fulfill your requirement.
<TouchableHighlight
style={styles.button}
onPress={this.onPress}
onLongPress={this.onPress2}
>
<Text> Touch Here </Text>
</TouchableHighlight>
and,
<TouchableWithoutFeedBack
style={styles.button}
onPress={this.onPress}
onLongPress={this.onPress2}
>
<Text> Touch Here </Text>
</TouchableWithoutFeedBack>
Hope this helps.....Thanks :)