React Native Prevent Double Tap

Question

I have a TouchableHighlight wrapping a Text block that when tapped, opens a new scene (which I\'m using react-native-router-flux).
It\'s all wo

Answer 1

After reading several github threads, SO articles and trying most solutions myself I have come to the following conclusions:

---

1. Providing an additional key parameter to do "idempotent pushes" does not work consistently as of now. https://github.com/react-navigation/rfcs/issues/16

2. Using debounce slows down the UX significantly. The navigation only happens X ms after the user has pushed the button the last time. X needs to be large enough to bridge the time where double taps might happen. Which might be anything from 100-600ms really.

3. Using _.throttle did not work for me. It saved the throttled function call and executed it after the timer ran out resulting in a delayed double tap.

---

I considered moving to react-native-navigation but apparently the issue lies deeper and they experience it too.

So for now I built my own hack that interferes with my code the least:

const preventDoubleTapHack = (component: any, doFunc: Function) => {
  if (!component.wasClickedYet__ULJyRdAvrHZvRrT7) {
    //  eslint-disable-next-line no-param-reassign
    component.wasClickedYet__ULJyRdAvrHZvRrT7 = true;
    setTimeout(() => {
      //  eslint-disable-next-line no-param-reassign
      component.wasClickedYet__ULJyRdAvrHZvRrT7 = false;
    }, 700);
    doFunc();
  }
};

anywhere, where we navigate instead of

this.props.navigation.navigate('MyRoute');

do

preventDoubleTapHack(this, () => this.props.navigation.navigate('MyRoute');

Beautiful.