I am making an app with react native. If there is no touch response on a current screen, I want to action that automatically advances to the next screen after 5 seconds.
If a button is pressed or input text is entered, I am thinking of clearing setTimeout and counting 5 seconds again. So I wrapped the functions to put in onPress and onChange that I have in screen. However, it works as if the button was pressed. How should I wrap it?... I'd appreciate it if you could let me know.
//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={'example@gmail.com'}
value={this.state.email}
onChangeText={text => this.setState({email: text})}
loading={this.props.isEmailReceiptFetching}
onPress={this.handleScreenTimeout(this.handleSendPress)}
/>
}
You need to change the following onPress handler
onPress={this.handleScreenTimeout(this.handleSendPress)}
to be a function that calls your function within it as below
onPress={() => this.handleScreenTimeout(this.handleSendPress)}