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

I fixed using this lodash method below,

Step 1

import { debounce } from 'lodash';

Step 2

Put this code inside the constructor

this.loginClick = debounce(this.loginClick .bind(this), 1000, {
            leading: true,
            trailing: false,
});

Step 3

Write on your onPress button like this

onPress={() => this.props.skipDebounce ? this.props.loginClick : this.loginClick ()}

Thanks,

Answer 2

The following works by preventing routing to the same route twice:

import { StackNavigator, NavigationActions } from 'react-navigation';

const App = StackNavigator({
    Home: { screen: HomeScreen },
    Details: { screen: DetailsScreen },
});

// Prevents double taps navigating twice
const navigateOnce = (getStateForAction) => (action, state) => {
    const { type, routeName } = action;
    return (
        state &&
        type === NavigationActions.NAVIGATE &&
        routeName === state.routes[state.routes.length - 1].routeName
    ) ? state : getStateForAction(action, state);
};
App.router.getStateForAction = navigateOnce(App.router.getStateForAction);

Answer 3

You can do using debounce very simple way

import debounce from 'lodash/debounce';

componentDidMount() {

       this.yourMethod= debounce(this.yourMethod.bind(this), 500);
  }

 yourMethod=()=> {
    //what you actually want your TouchableHighlight to do
}

<TouchableHighlight  onPress={this.yourMethod}>
 ...
</TouchableHighlight >

Answer 4

If you are using react-navigation, you can supply a key property to navigate to ensure only one instance is ever added to the stack.

via https://github.com/react-navigation/react-navigation/issues/271