Currently, I am working on developing an app using react native. The goal is to have the screen automatically advance to the next one if there is no touch response within 5 seconds.
I have implemented a function where pressing a button or entering text will reset the timer back to 5 seconds. Despite this, the function seems to be triggered as soon as the button is pressed. How can I fix this issue? Any advice would be greatly appreciated.
//ReceiptScreen
...
componentWillUnmount() {
this._isMounted = false;
clearTimeout(this.nextScreenTimer);
}
handleSendPress = () => {
if (isValidEmail(this.state.email)) {
this.props.sendEmailReceipt(this.state.email, this.props.order);
} else {
Alert.alert(
null,
[
{
text: 'close',
onPress: () => null,
},
],
{cancelable: true},
);
}
};
handleScreenTimeout = func => {
console.log('what', func);
clearTimeout(this.nextScreenTimer);
this.nextScreenTimer = setTimeout(() => {
this.handlePressClose();
}, 5000);
func();
};
componentDidMount() {
this.nextScreenTimer = setTimeout(() => {
this.handlePressClose();
}, 5000);
}
....
render() {
....
<InputButton
placeholder={'<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2f4a574e425f434a6f48424e4643014c4042">[email protected]</a>'}
value={this.state.email}
onChangeText={text => this.setState({email: text})}
loading={this.props.isEmailReceiptFetching}
onPress={this.handleScreenTimeout(this.handleSendPress)}
/>
}