react-native-countdown | A Countdown / component

As you said, this is normal behavior and not related to your application. The android os will handle these jobs for your applications.

There are some settings in the phone to limit your application from running in the background. But it's not the ideal way to manage this issue.

All your needs are to keep running your application in the background.

So, there are some solutions like using headless Js. read more on RN documentation. You can create an unstoppable service for your application. You can use this article to do it.

Also, there is a solution with using react-native-background-actions package.

You can create a switch between durations after onComplete callback is called on react-native-countdown-circle-timer.

Refer to this expo code below. It has a working example of the solution.

https://snack.expo.dev/@darshan09200/stackoverflow-question-no-69081296

As per the docs, If you want to reset time after the component has been mounted

key={value} Whenever this value is updated the timer component takes the new value of the duration

run command from the project root folder.

if npm

rm -rf node_modules package-lock.json

if yarn

rm -rf node_modules yarn.lock

remove ^ from every package

set package version from the concerned library if that version exists then ok, otherwise set version that actually exists

run command

npm install or yarn install

then

cd ios

run command from ios folder

rm -rf Pods Podfile.lock

then

pod install

As far as I can tell, you're almost there! You're trying to get your 2 state variables from the WorkoutTimer like this:

Since it's a functional component, the function is being re-run everytime it renders. This means that the value of num (in var num = 0) is reseted, and it's always 0.

The best solution here, as you mentioned, is to use the state. You can imagine your state as what defines the data of your component. Your component decides what to show according to the state.

You can, for example, save the count in a state variable (using useState) and set the image according to the value in this state (like image={exercise[count]}). Whenever the onComplete is called, you can set it there (augmenting the count by 1).

Another optimization can be to have the array of images out of the component. This would stop re-creating the array images on every render.

For more information on state, you can check the official docs