Duplicate click react native

Question

I have a problem when user spam click/tap on a button/TouchableOpacity in react native.

Ex: tap to navigate another screen

How can i fix that?

Function

onItemPress(title) {
    this.props.navigation.navigate(title.toLowerCase(), { title });
}

Render

<TouchableOpacity
    onPress={() => this.onItemPress("QuickMenu")}
/>

Use a state variable to control the execution of the `onPress` function. Also, please post your relevant code and attempts to solve your problem. You might want to look at [How to ask](https://stackoverflow.com/help/how-to-ask) and provide an [MVCE](https://stackoverflow.com/help/mcve) — G0dsquad, Jun 28 '17 at 09:05
Use state variable for handle it?? But when I navigate to another screen, that state is not right at new screen component. — monkey luffy, Jun 28 '17 at 09:18

score 0 · Answer 1 · edited Mar 15 '18 at 23:22

0

I think this is an option Component

<TouchableHighlight ref = {component => this._touchable = component}
                    onPress={() => this.yourMethod()}/>

Method

yourMethod() {
    var touchable = this._touchable;
    touchable.disabled = {true};

    //what you actually want your TouchableHighlight to do
}

edited Mar 15 '18 at 23:22

David Schumann

answered Jul 28 '17 at 02:51

Leo

I tried it, but it doesn't work. Thanks for your suggesting. But i have a question, if we **disabled** click button for our function, how we handle this button next time click ( not trash click ) ? – monkey luffy Aug 02 '17 at 01:47
@monkeyluffy I know this is old, but I ended up using the disabled prop on TouchableOpacity. When the function is invoked, I setState to disable the component. Then at the end of the function I use a timeout to reenable the component. This lets me prevent the double tap – Richard McCluskey May 03 '18 at 04:46

1 Answers1