Preventing React-Navigation Multiple Screen Instances
A quick solution to problem faced in react-navigation Prevent navigating twice when clicking a button quickly #271
NOTE: This is a work around for react-navigation (v1), in v2 this issue is fixed.
Content
MultiTapHandler
The concept that saves the day is called throtteling.
export default (func, wait = 500) => {
let tapCount = 0;
let handler;
return function() {
if (tapCount === 0) {
tapCount++;
func();
}
// Clear the previous timeout and set a new one.
clearTimeout(handler);
handler = setTimeout(() => (tapCount = 0), wait);
};
};
Usage
onPress={multipleTapHandler(() => this.doSomethingCool())}
Example
With React
import React, { Component } from 'react';
import { TouchableOpacity } from 'react-native';
import PropTypes from 'prop-types';
import multipleTapHandler from 'multipleTapHandler';
class Button extends Component {
render() {
return (
<TouchableOpacity
{...this.props}
onPress={multipleTapHandler(() => this.props.onPress(), this.props.ignoreMultipleTouches ? 500 : 0)}
/>
);
}
}
Button.defaultProps = {
ignoreMultipleTouches: false
};
Button.propTypes = {
ignoreMultipleTouches: PropTypes.bool
};
export default Button;
Without React
import multipleTapHandler from 'multipleTapHandler';
// Tap Event
const onTap = () => {
console.log("onTapEvent called.")
}
// Actual user Tap.
tap = multipleTapHandler(() => {onTap()})
// Helper
const sleep = (ms) => {
return new Promise(resolve => setTimeout(resolve, ms));
}
async function main() {
// Loops mimics the user tap frequency.
for (let i=0; i < 10; i++){
tap()
// tapping this 10 times after every 100 milliseconds.
await sleep(100)
}
}
main()
Conslusion
Thank you for reading this post — I hope you found this helpful. You can find me on GitHub, LinkedIn and CodeMentor. If you have any questions, feel free to reach out to me!
More posts:
