BackgroundTimer.setInterval is not synchronized with the actual timer

[scrapecoder]

BackgroundTimer.setInterval() is running 4-5 seconds more than the actual timer. when I try to run this for 5 minutes it's actually running for 5 minutes 5 seconds. which is not good

  x = BackgroundTimer.setInterval(() => {
		let { eventDate } = state;

		if (eventDate <= 0) {
			clearInterval(x);
		}
		else {
			eventDate = eventDate.subtract(1, 's');

			// const hours = eventDate.hours();
			// const mins = eventDate.minutes();
			// const secs = eventDate.seconds();

			setState({
				// hours,

				eventDate
			});
		}
	}, 1000);

[gkhngyk]

Same problem when i use BackgroundTimer.setInterval function.

[tisch7]

same issue here

[jnjacobson]

Maybe this can help you: https://aloukissas.medium.com/how-to-build-a-background-timer-in-expo-react-native-without-ejecting-ea7d67478408 You can update the eventDate in the function by substracting the difference between the start date and now.

This is how I used it in my timer:

await AsyncStorage.setItem('start_time', new Date().toISOString());

BackgroundTimer.runBackgroundTimer(async () => {
      const startTime = await AsyncStorage.getItem('start_time');

      this.setState((prevState) => ({
        timeLeft:
          this.duration -
          differenceInSeconds(new Date(), Date.parse(startTime)),
      }));
    }, 1000);
  }

[biddano]

@jnjacobson - thanks! this was the solution for me. timer is accurate now and not seemingly random

[OmarBasem]

@jnjacobson perfect!

[OmarBasem]

And btw, @jnjacobson solution does not even need BackgroundTimer, setInterval would do

[maxim-green]

@jnjacobson thanks! That really helped!

[ikurowski]

Maybe this can help you: https://aloukissas.medium.com/how-to-build-a-background-timer-in-expo-react-native-without-ejecting-ea7d67478408 You can update the eventDate in the function by substracting the difference between the start date and now.

This is how I used it in my timer:

await AsyncStorage.setItem('start_time', new Date().toISOString());

BackgroundTimer.runBackgroundTimer(async () => {
      const startTime = await AsyncStorage.getItem('start_time');

      this.setState((prevState) => ({
        timeLeft:
          this.duration -
          differenceInSeconds(new Date(), Date.parse(startTime)),
      }));
    }, 1000);
  }

I don't think this is the best solution because the timer occasionally skips a second to make uneven BackgroundTimer seems even.

[thatgriffith]

Maybe this can help you: https://aloukissas.medium.com/how-to-build-a-background-timer-in-expo-react-native-without-ejecting-ea7d67478408 You can update the eventDate in the function by substracting the difference between the start date and now. This is how I used it in my timer:

await AsyncStorage.setItem('start_time', new Date().toISOString());

BackgroundTimer.runBackgroundTimer(async () => {
      const startTime = await AsyncStorage.getItem('start_time');

      this.setState((prevState) => ({
        timeLeft:
          this.duration -
          differenceInSeconds(new Date(), Date.parse(startTime)),
      }));
    }, 1000);
  }

I don't think this is the best solution because the timer occasionally skips a second to make uneven BackgroundTimer seems even.

I am also experience this problem and I am trying to come up with a solution. Did you manage to fix it? @ikurowski

[thatgriffith]

For anyone still experiencing this issue, I solved it with the following:

• For iOS it works with JS own setInterval so no additional package needed here.
• For Android I found the package: https://github.com/juanamd/react-native-background-timer-android that states to be an improvement of this package. I gave it a go and it works perfect. However, in dev mode on real device when returning from background the UI could lag from time to time. But when testing on a production apk, it works smoothly. No delay in time or any other problem.

Hopefully this helps anyone still struggling with this problem.