Countdown does not reset. Stops working when id prop is used.

[rubek-joshi]

I think there should be an example of resetting the timer on state or props change because I am trying and it's just not working at the moment. My code is as follows: State:

this.state = {
      pinInput: "",
      pinSent: false,
      id: 1,
      until: 60 * 10,
      runCountdown: false
};

Render method:

<CountDown
    id={this.state.id.toString()}
    until={this.state.until}
    running={this.state.runCountdown}
     onFinish={() => alert("Finished")}
     // onPress={() => alert("hello")}
    size={24}
    timeToShow={["M", "S"]}
    timeLabels={{ m: "Minute(s)", s: "Second(s)" }}
    separatorStyle={{ color: colors.primary, textAlign: "center" }}
    showSeparator
/>

componentDidMount:

componentDidMount() {
    this._someAxiosRequest();
}

_someAxiosRequest:

_someAxiosRequest = _ => {
    this.setState({
      spinner: true,
      pinSent: false,
      runCountdown: false
    });
    axios
      .post(api, { email: this.props.user.email })
      .then(({ data }) => {
        console.log(data);
        this.setState({
          spinner: false,
          pinSent: true,
          id: ++this.state.id,
          until: 60 * 10,
          runCountdown: true
        });
      })
      .catch(err => {
        console.log(err);
        this.setState({ spinner: false });
      });
  };

[QuangChien-NTQ-NS6]

me too :(

[talalmajali]

@rubek-joshi @QuangChien-NTQ-NS6 can you console log what are the props in componentWillReceiveProps? in the node_modules/react-native-countdown-component/index.js

[kelpo123]

try change updateTimer on node_modules/react-native-countdown-component/index.js with this... updateTimer = () => { // Don't fetch these values here, because their value might be changed // in another thread // const {lastUntil, until} = this.state;

if (this.state.until === 1 || (this.state.until === 0 && this.state.lastUntil !== 1)) {
  if (this.state.lastUntil === this.state.until || !this.props.running) {
    return;
  }
  if (this.props.onFinish) {
    this.props.onFinish();
  }
  if (this.props.onChange) {
    this.props.onChange(this.state.until);
  }
}

if (this.state.until === 0) {
  this.setState({lastUntil: 0, until: 0});
} else {
  if (this.props.onChange) {
    this.props.onChange(this.state.until);
  }
  this.setState({
    lastUntil: this.state.until,
    until: Math.max(0, this.state.until - 1)
  });
}
if (this.state.lastUntil === this.state.until || !this.props.running) {
  return;
}

};

[DeviprasadMG]

@rubek-joshi I found how to reset the counter, Replace "++this.state.id" to "Math.random()".

Math.random() worked for me, hope that works for you!!

[Sanath-syn]

@rubek-jhoshi Hi, I am also facing the same issue but now it's resolved. See the below code:

const OTPScreen = (props) => { const [count, setCount] = useState(60*5);

const generateOTP = async () => { setCount(60*5); } useEffect(() => { //////////optional generateOTP(); })

return <View style={{ flex: 1 }}> <TouchableOpacity style={styles.label2}

Didn't receive OTP RESEND

<CountDown style={styles.timestyle} until={count} size={15} onFinish={finishCount} digitStyle={{backgroundColor: '#FFF'}} digitTxtStyle={{color: '#1ABC9D'}} timeToShow={['M', 'S']} showSeparator={true} timeLabels={{m: null, s: null}} />
} const styles = StyleSheet.create({ //////style code } ``

[shanisnake]

To reset time with new time just hide component and show after new time set Eg. if (isTimeExtended && secondCounter > 0) { setCountdownVisible(false); setCounter(secondCounter + userQuizData.setting.extend_time); setTimeout(() => { setCountdownVisible(true); }) setTimeExtend(false); }

{countdownVisible ? ( <CountDown until={counter} onFinish={() => setModalVisible(true)} onChange={(seconds) => { setSecondCounter(seconds) }} size={16} timeToShow={['S']} digitStyle={{backgroundColor: '#FFF'}} timeLabels={{s: null}} /> ):(

    )}

[memanoj]

Try this https://github.com/talalmajali/react-native-countdown-component/issues/92#issuecomment-1467393540