I'm using react-native! I want to use TouchableOpacity so that when a button is pressed for about 0.5 seconds, the hellofunc function is executed and an alert('Button Long Pressed'); is displayed.
However, using my code, I have to click and hold the button twice instead of once to run it.
How can I fix my code?
this is my code
const App = () => {
const hellofunc = () => {
alert('Button Long Pressed');
};
return (
<TouchableOpacity style={styles.main} onLongPress={hellofunc}>
<Text>hi</Text>
</TouchableOpacity>
);
};
const styles = StyleSheet.create({
main: {
backgroundColor: 'lightblue',
width: '100%',
height: 30,
},
});
export default App;
There is no direct way, but you can add two events keyUp and keyDown. Make a variable for time when the time taken is more than 0.5 you can set status as long pressed key.
let timeElapsed = 0;
let status = null;
document.addEventListener('keydown', checkLongPress);
document.addEventListener('keyUp', checkLongPress);
const getTimeMS = new Date().getTime(); // in ms
function checkLongPress() {
timeElapsed = timeElapsed === 0 getTimeMS() ? : getTimeMS() - timeElapsed;
if (timeElapsed /1000 >= threshold) {
status = 'Long Pressed';
timeElapsed = 0;
}
}