6

I am working on a react native app for users to track their gym workouts. I wanted to start a timer when the user starts their workout. During their workout they will type in information and then most likely lock the phone and maybe even use other apps during their workout. Running a simple setInterval to keep track of the time does not work because once the app is in the background no JS is able to run anymore. I found this library that uses native code https://github.com/ocetnik/react-native-background-timer to keep your javascript running in the background but it seems to have some bugs at the moment. I found that after 10 seconds in the background the JS logic stops running.

react-native: "0.60.5
Improve this question

3 Answers 3

Reset to default
8

The answer I ended up with was to stop trying to run a timer in the background and instead use timestamps to compute the difference between 2 times since its difficult to reliably run logic in the background in a cross platform way without a lot of added complexity.

Using the function below I would generate a timestamp with moment.js when the timer needs to start and then when the timer needs to stop generate another timestamp and calculate the difference between them.

const getCurrentTimeInWithMomentLibary = moment().format( 'MM/DD/YYYY HH:mm:ss' );


const diffTime = ( then, now ) => {
  const ms = moment( now, 'MM/DD/YYYY HH:mm:ss' )
    .diff( moment( then, 'MM/DD/YYYY HH:mm:ss' ) );
  const duration = moment.duration( ms );
  const hours = Math.floor( duration.asHours() );

  const currentDate = moment().format( 'MM/DD/YYYY' );
  const time = `${ hours }:${ moment.utc( ms ).format( 'mm:ss' ) }`;
  return `${ currentDate } ${ time }`;
};
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

2

Not a direct answer to your question but a suggestion that might make this issue irrelevant...

Assuming your users actually enter a start and end time for their workout, you will be able to calculate the amount of time spent working out using these timestamps.

Subtracting the start time from the end time would give you a duration of the users workout.

Improve this answer

2 Comments

Yes that was the solution I ended up with but when I first ran into this issue there was no question where this was mentioned as a possible solution so to save others time I thought I was ask it and leave my answer.
Ahh I see - it's great that you took the time to share what you have found :)
0

For Android, it can be resolved through a module in React-native. But it only works on Android.

Headless JS

Example

import {HeadlessJsTaskError} from 'HeadlessJsTask';

module.exports = async (taskData) => {
  const condition = ...;
  if (!condition) {
    throw new HeadlessJsTaskError();
  }
};
Improve this answer

1 Comment

Thanks, for the answer. I had seen this one in a couple other posts but the goal will be to eventually have the app working for both IOS and Android and to have a maintainable app in the end. So I prefer to find simple JS, cross platform solutions that I know wont break anytime soon.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.