How can I run background tasks in React Native?

I've built a little iOS app in React Native that does location tracking, sending the lat/lng regularly to a server of the user's choosing. However this only works when the app is in the foreground. How can I run this task in the background when the user is in other apps?

Answers:

Answer

Currently, there is, unfortunately, no support for background tasks of any kind. The feature you are referring to would be a background timer. Such a timer is this product pain (a feature request) for react native, you may upvote it to show an increased demand for this feature.

EDIT 12/2016: There is still no real option. You have the Headless JS API since RN 0.33, but it is only for android. Also your App will crash if this runs in the foreground so you have to be careful about using it. Thanks to @Feng for pointing that out.

Answer

And now there is react-native-background-task which is a single API for both Android and iOS.

Answer

The React Native ecosystem has been moving at breakneck pace over the past few months, and a few plugins have popped up to address the pain of not being able to run code in the background.

https://github.com/transistorsoft/react-native-background-fetch -- Wake up for 30 seconds periodically to run some arbitrary JS code. Not suitable for high resolution geolocation, as the time between wake-ups will be 15min or more.

https://github.com/transistorsoft/react-native-background-geolocation -- A better fit for this situation, targeted specifically at geolocation in the background.

Answer

These libraries can help you to achieve your desired functionality:

  1. react-native-background-job
  2. react-native-background-task
  3. react-native-background-fetch

Alternatively, you can use Headless JS from react-native. But its only available for Android.

Answer

I use this, and it seems to work: https://github.com/ocetnik/react-native-background-timer

Emit event periodically (even when app is in the background).

You can use the setInterval and setTimeout functions. This API is identical to that of react-native and can be used to quickly replace existing timers with background timers.

import BackgroundTimer from 'react-native-background-timer';

// Start a timer that runs continuous after X milliseconds
const intervalId = BackgroundTimer.setInterval(() => {
    // this will be executed every 200 ms
    // even when app is the the background
    console.log('tic');
}, 200);

// Cancel the timer when you are done with it
BackgroundTimer.clearInterval(intervalId);

// Start a timer that runs once after X milliseconds
const timeoutId = BackgroundTimer.setTimeout(() => {
    // this will be executed once after 10 seconds
    // even when app is the the background
    console.log('tac');
}, 10000);

// Cancel the timeout if necessary
BackgroundTimer.clearTimeout(timeoutId);

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.