CODEWITHSUNDEEP
javascriptreactjsreact-nativereact-redux
vincent O
vincent O

Reputation: 538

Restart Countdown timer in react native

working on a countdown timer, I want to be able to restart the countdown onpress of the button, however, I don't think the button is functional as I get no feedback. can someone please point me in the right direction. below is a trimmed down sample code of what I am trying to achieve.

export default class Example extends Component {
  constructor(props) {
      super(props);
      this.state = {
          timer: 10,
          timesup: false,
          timing: true,
          showWelcome: true,
      };
  }

  componentDidMount() {
      this.clockCall = setInterval(() => {
          this.decrementClock();
      }, 1000);
  }

  startTimer = () => {
      this.setState({
          timing: true,
          timer: 30,
          showWelcome: false
      })
  }


  decrementClock = () => {
      this.setState((prevstate) => ({
          timer: prevstate.timer - 1
      }), () => {
          if (this.state.timer === 0) {
              clearInterval(this.clockCall)
              this.setState({
                  timesup: true,
                  timing: false,
                  showWelcome: false,
              })
          }
      })
  }


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


  render() {
      return (
          <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>

  {this.state.timesup && (
      <Text style={{fontSize: 18, color: '#000'}}>
      Time up
      </Text>)}


  {this.state.timing && (
      <Text style={{fontSize: 18, color: '#000'}}>
      {this.state.timer}
      </Text>)}

        {this.state.showWelcome && (
          <Text style={{ fontSize: 20 }}>Welcome</Text>
        )}

        <Button Onpress={this.startTimer.bind(this)} title='play' />
      </View>
      )
  }
}

Upvotes: 0

Views: 1459

Answers (1)

Vitor
Vitor

Reputation: 66

I believe you're looking for onPress, not Onpress. Also, if you are using:

startTimer = () => ...

Using:

this.startTimer.bind

Has no effect, since the method is already bound to this by the arrow function. You can then simply use:

onPress={this.startTimer}

Upvotes: 5

Related Questions