How can I fire an event using onLongPress in React native?

Question

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;

Answer 1

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;
    }
}