vydimitrov / react-countdown-circle-timer

Lightweight React/React Native countdown timer component with color and progress animation based on SVG
MIT License
692 stars 87 forks source link

Can you save value of remainingTime when app goes to background? #179

Closed acopetkovic closed 3 years ago

acopetkovic commented 3 years ago

I have countdown that starts with 86400 seconds (24hours) so when user leaves the app and then opens it again afrter some time, how can I resume countdown rather the it just restarting back to 86400 sec?

Is it possible to save value of time remaining when app state changes?

vydimitrov commented 3 years ago

Hey, you will need to implement it yourself. You can get the remaining time from the children component, like so:

const remainingTimeRef = useRef()

<Countdown>
  {({ remainingTime }) => {
      remainingTimeRef.current = remainingTime

     return remainingTime
  }}
</Countdown>

Then you will need to save it somewhere when the app goes to background. Once it comes back you can use the value you saved and pass it to initialRemainingTime prop and keep the same duration as before. If the component it is not mounted again once the app comes back you will need to pass a new key prop like here.

vydimitrov commented 3 years ago

Hey @acopetkovic, does the solution above work for you?

acopetkovic commented 3 years ago

Yes! I made it work. Thank you.

vydimitrov commented 3 years ago

Cool, I am closing this one then.