I have a simple piece of code that's just a TouchableOpacity with a onLongPress prop, but it does not seem to be working.
<TouchableOpacity delayLongPress={10} onLongPress={()=>{console.log("pressed")}} activeOpacity={0.6}>
<Text>BUTTON</Text>
</TouchableOpacity>
I've tried removing the delay prop but that still doesn't work. Changing onLongPress to onPress does seem to work however, but I want the long press functionality. I'm testing this on an Android simulator.
These long presses can be handled by passing a function to the onLongPress props of any of the "Touchable" components.
If you're looking for a more extensive and future-proof way to handle touch-based input, check out the Pressable API. A wrapper for making views respond properly to touches. On press down, the opacity of the wrapped view is decreased, dimming it.
To create custom buttons, you need to customize the <TouchableOpacity /> component and include the <Text /> component inside of it to display the button text. const AppButton = ({ onPress, title }) => ( <TouchableOpacity onPress={onPress} style={styles. appButtonContainer}> <Text style={styles.
You will have to wrap your View inside TouchableHighlight or Opacity etc. I figured out a different way to solve my problem using pointerEvents={'box-none'} on my container View and wrapped the image in a View and gave it pointerEvents={'none'}.
According to this issue this happens randomly, after testing on a real device with React Native Debugger enabled. Disabling React Native Debugger will make your problem go away.
if you want to show a view on long press and hide it on release :
<TouchableOpacity
onPress={this._onPress}
onLongPress={this._onLongPress}
onPressOut={this._onPressOut}
>
....
</TouchableOpacity>
_onLongPress = () => {
this.setState({
modalVisible: true
})
}
_onPressOut = () => {
this.setState({
modalVisible: false
})
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With