How can i start timer from 0 to end time.

[berkaygurbuz]

Is there any feature about to start timer from 0 to end time.

[vydimitrov]

Hey @berkaygurbuz, what is your use-case? I guess you can achieve it with the current API.

[berkaygurbuz]

I want to use like a timer not a countdown timer. It starts 0 to specific end time.

[quicksilverr]

?Any updates on this @vydimitrov @berkaygurbuz

[quicksilverr]

Basically, want there shouldn't be a progress bar initially, once we start the progress should be visible from zero

[vydimitrov]

Hey, there is no API for this but you can make it yourself with the current one. The children prop receives the elapsedTime in seconds, which you can use to display it in the middle of the circle. The progress bar - you will need to make the trailColor to be your active color and set the colors prop to your inactive color so this way it will appear like counting up.

[berkaygurbuz]

I solved the problem as following :

• Go packages/mobile/src/components/TimeWrapper.js

• Change the code on 41th line as follows:

  const animatedListenerId = animatedElapsedTime.addListener(({ value }) => {
  const elapsedTime = value / 1000
  setTimeProps({
      remainingTime: Math.ceil(elapsedTime),
      elapsedTime,
      animatedColor,
    })

• Go to packages/mobile/src/hooks/useCountdown.js and change the code on 28th line as follows:

  const { durationMilliseconds, startAt } = useRef({
  durationMilliseconds: duration * 1000,
  startAt:0,
  }).current
  const repeatTimeoutRef = useRef(null)
  const isMountedRef = useRef(false)
  const animatedElapsedTime = useRef(new Animated.Value(0)).current
  const totalElapsedTime = useRef((startAt / 1000) * +1) // in seconds

• Change the code on 91th line as follows:

  totalElapsedTime.current -= durationMilliseconds / 1000

• I change the variable name called CountdownCircleTimer to CircleTimer because that the packages don't get mixed up and I want to use both of them that are countdown and timer.

• Use the reverse color for trailColor and colors.

• Publish your new package to use. More information about publishing package

[vydimitrov]

Perfect, thank you for sharing your solution :)

[rgavinc]

Would it be possible to add this as a feature that can be turned on/off with a Boolean?

[Geczy]

any update on adding this as a boolfeature?

[vydimitrov]

Is this one going to help? https://github.com/vydimitrov/react-countdown-circle-timer/pull/214