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

Maintain the countdown circle timer running after screen sleep or lock device (ios) #207

Closed erotundo closed 2 years ago

erotundo commented 2 years ago

Hi!

First all excellent package, works very well.

I have a detail, i'm running a countdown with 10 minutes but if i lock the screen the timer keep freeze until back and unlock again it's like the phone put on sleep the application.

Existing a way to keep running the timer with the screen locked?

Kind Regards

ER

vydimitrov commented 2 years ago

Hey @erotundo 👋 , yup, that is what happens here, when the app is inactive or not on focus all kind of animations are suspended to keep the battery. The thing you can do in this case is to save the remaining time and the current time (like in UNIX timestamp) when the app goes in the background, when the app comes back active, you check again the current time and subtract the time when the app went inactive so you know how much time passed. Then from the remaining time you subtract the elapsed time and make the timer start from that position so it looks like it was running in the background. Does it make sense?

erotundo commented 2 years ago

Hi @vydimitrov thanks for your quick answer, lot of things happen with the background (not with your library works very well) in iOS the suspension on the background activities (30 seconds) generates a problem in all ways so i think the same capture when start the counter and when turn on the screen capture this new moment and update the remaining time or trigger the complete event if it's done. I use a solution to keep the screen awake with the keep-awake package and with that all works (obviously hahaha). Thanks again for your answer i think right it's something we cannot solve but with the screen awake or capture the time and restart the countdown with the new remaining time it's enough. Kind Regards!

sorensenmarius commented 2 years ago

I seem to have the same problem with a React app running on an Android phone via PWA. Which leads me to believe this is not mobile or iOS specific :)

vydimitrov commented 2 years ago

Hey @sorensenmarius, did you manage to find a workaround for this on Android?

sorensenmarius commented 2 years ago

Hey @vydimitrov, I have not found a workaround while using this component. However, I implemented it myself without this component and solved the problem by saving the timer start time and calculating the time left from that rather than having a background process counting continously.

vydimitrov commented 2 years ago

Ahhh, cool, it is good you found a solution for you :) If I can ask, what was the problem adding the same logic for saving the time and use it later with the countdown timer?

sorensenmarius commented 2 years ago

I am sure that would work as well, as it is basically the same approach I ended up using ;)

vydimitrov commented 2 years ago

Cool, I just wanted to know if there is an easy way to do it since already a few people ask about a solution for this problem.