react native onpressin and onpressout - react-native

Question

I tried to create a long press button to keep counting, however the interval wont stop when I release the onPressOut
const App = () => {
const [count, setCount] = useState(0);
let timer;
const onButtonPressIn = () => {
timer = setInterval(() => {
console.log("in");
setCount(count => count + 1);
}, 1000);
}
const onButtonPressOut = () =>{
console.log("out");
clearInterval(timer);
}
return(
<View>
<TouchableOpacity style={styles.longbtn}
activeOpacity={0.9}
onPressIn={()=> onButtonPressIn()}
onPressOut={()=> onButtonPressOut()}
>
<Text style={styles.longbtntt}>LONG PRESS TO START - {count}</Text>
</TouchableOpacity>
</View>
)
}

Answer 1

The method used to handle the timer is not the exact one for the sort of use case you are trying to implement it for. You have to use clearTimeout instead of clearInterval when you're dismissing the Timer . Solution is as below, just modify it to use hooks.
import React from 'react';
import {
SafeAreaView,
View,
Dimensions,
TouchableOpacity,
Text
} from 'react-native';
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {
counter: 0
};
this.timer = null;
}
addOne = () => {
this.setState({counter: this.state.counter+1});
this.timer = setTimeout(this.addOne, 200);
}
stopTimer = () => {
clearTimeout(this.timer);
}
render() {
const screenHeight = Math.round(Dimensions.get('window').height);
return (
<SafeAreaView>
<View style={{height: screenHeight}}>
<TouchableOpacity
style={{backgroundColor: "#FFC0CB"}}
onPressIn={this.addOne}
onPressOut={this.stopTimer}
>
<Text>Press to start</Text>
</TouchableOpacity>
<Text>{this.state.counter}</Text>
</View>
</SafeAreaView>
);
}
}

Answer 2

The timer changes value when you assign a new interval to it, but the function onButtonPressOut remembers the value that timer had when the function was created. You can use useCallback here, like so:
const onButtonPressOut = useCallback(() => { //same thing }, [timer]);
This will update the function whenever timer changes and clear the appropriate interval.