I am making a login screen, in which user has to verify his phone number, and when he clicks on 'RESEND OTP(one time password)' and OTP is sent to his phone.

But, as soon as 'Resend OTP' button is clicked, it should get disabled for 30 seconds, and a countdown should be displayed, and as soon as it reaches 0, button should get enabled again. And the process should reset, as in he should be able to click on it again, and time should start again from 30, and so on.

```
componentDidUpdate() {
    if (this.state.timer === 1) {
      clearInterval(this.interval);
    }
  }

  componentWillUnmount() {
    clearInterval(this.interval);
  }

 resendOtp = () => {
    this.setState({
      isButtonDisabled: true,
    });

    this.interval = setTimeout(() => { return this.setState({
      isButtonDisabled: false,
    }); }, 10000);

    this.interval = setInterval(
      () => { return this.setState((prevState) => {
        return { timer: prevState.timer - 1 }; }); },
      1000
    );

    this.requestOtp();
  }

<Text style={styles.text}>{this.state.timer}</Text>
<TextButton
 title="Resend OTP"
 onPress={this.resendOtp}
 disabled={this.state.isButtonDisabled}
/>

```