until does not update when state.property is changed - stays one update behind.

[lazynewt]

Hi when i am incrementing the until time the countdown UI does not reflect the change. However when i then update it again it reflects the previous value. e.g

state.until is used and set initially as 60 and is displaying 1 minute
I then set state.until = 180 yet the countdown still displays 1 minute
I then set state.until = 240 and the countdown now shows 2 minutes
I then set the state.until to 300 and the countdown shows 3 minutes

It remains 1 UI update behind.

I have tried .forcerefresh

Is there a reason for this behaviour ? (running 2.7.1)
Thanks.

[lazynewt]

Can someone please update/ commit this change#
componentDidUpdate(prevProps, prevState) { if (this.props.until !== prevProps.until || this.props.id !== prevProps.id) { this.setState({ lastUntil: 0, until: Math.max(this.props.until, 0) }); } }

Or even advise me on how i can which would be even better ?
Thanks.

[chrisozgo99]

Also running into this same issue and would love to see it fixed

[dieptang]

also same problem. + 1

[gredy-devstack]

Maybe you can use props "id".
When you update "until" props value on state you also need to update "id" props value as well.
just use random string generator for "id" and it's working fine for me.

[pwliuab]

you can search pull request, change the original index file to that version,
I have made a pull request to solve this problem.

[gerardcsaperas]

Hi guys,

I was having the same problem and I figured it out. Actually, it's written in the documentation:
Props -> id: string: Counter id, to determine whether to reset the counter or not.

You just have to update your component's id every time your until's prop value changes, as such:

import React, { useEffect, useState } from "react"
import { useSelector, useDispatch } from "react-redux"
import CountDown from "react-native-countdown-component"
import { setRest } from "../data/restSlice"

const Timer = () => {
  const dispatch = useDispatch()
  /** rest time from store */
  const restTime = useSelector((state) => (state as any).rest.value)
  /** countdown component id */
  const [countDownId, setCountDownId] = useState(undefined)

  /**
   * Update countdown component id every time
   * rest time changes.
   *
   * Needed to refresh countdown component.
   */
  useEffect(() => {
    // Generate new id based on unix timestamp (string)
    const id = new Date().getTime().toString()
    // Set id to state
    setCountDownId(id)
  }, [restTime])

  return (
    <CountDown
      id={countDownId}
      until={restTime}
      onFinish={() => dispatch(setRest(0))}
      onPress={() => dispatch(setRest(0))}
      size={30}
      timeToShow={["M", "S"]}
    />
  )
}

Hope it helps!