How do I use React Native onLongPress properly?

Question

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.

romin21 · Answer 1 · 2018-11-28T18:55:31.157

11

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.

edited Nov 28 '18 at 18:55

answered Nov 28 '18 at 18:49

romin21

1,532
1
14
35

3

`delayLongPress={10}` delays the function call for 10 milliseconds, that's why it looks like it's instant. Try setting it to a value > 1000 for example. – romin21 Nov 28 '18 at 21:10
That doesn't matter, onLongPress is not being called. – Nerdragen Nov 29 '18 at 23:04

score 4 · Answer 2 · answered Apr 30 '19 at 08:47

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
    })
}

score -3 · Answer 3 · answered Nov 29 '18 at 01:38

-3

You can test on a IOS simulator or in the release package.

answered Nov 29 '18 at 01:38

zhou Dai

341
2
4

How do I use React Native onLongPress properly?

3 Answers3