How to make continuous increment with React Native Touchable?

Question

Is there any property in the TouchableOpacity React Native which, when I pressed the increment button and held the touch, continued incrementing the values?

For example, I have this button:

<TouchableOpacity
   style={styles.button} 
   onPress={()=>increment(item.id,item.amount)}
 >
  <Text> + </Text>
</TouchableOpacity> 

That renders like this:

I would like to continue to increase the value by pressing the button.

Answer 1

Hello, Touchableopacity and Touchablewithoutfeedback have the options of onPressIn and onPressOut, I believe this will help solve the problem.

You can have a state controlling if the button is still being pressed and make a loop to go incrementing.

Answer 2

The shape I found was using onPressIn and onPressOut with setTimeout.

const App = () => {

 const [count, setCount] = useState(0);
 const [timer,setTimer] = useState(null);

const handlePressIn = () =>{
 // A cada 200ms enquanto estiver pressionando o botão ele vai 
 // executar a função
 setCount(prevCount => prevCount + 1);
 setTimer(setTimeout(handlePressIn, 200));
}

const handlePressOut = () =>{
 clearTimeout(timer);
}

return ( ... )

Now I will try to replicate for my use case.