After wrapping the arrow function, why is the function executed immediately?

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)}
            />
}

Answer

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

Advertisement

Answer