105

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?

Daniel Schmidt
  • 11,605
  • 5
  • 38
  • 70
liamzebedee
  • 14,010
  • 21
  • 72
  • 118
  • You can probably do this by setting UIBackgroundModes to location in the plist - have a look here https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/LocationAwarenessPG/CoreLocation/CoreLocation.html – Ben Clayton Feb 13 '16 at 10:37
  • 4
    There is a limitation in React Native wherein when the app is in the background the js bridge stops getting messages. This means if you are trying to send the data from js then you won't be able to count on the data making it. Alternatively you could write the code to send the updates in native code and that should do the trick – rmevans9 Feb 14 '16 at 01:13
  • 4
    Thansk @rmevans9 this is a good start. For anyone who finds this I've already done a little bit of work here https://gist.github.com/liamzebedee/67e1b2c53c6c5edcf8ec – liamzebedee Feb 14 '16 at 08:48
  • 1
    @liamzebedee Would you mind accepting the answer? – Daniel Schmidt Jun 08 '16 at 18:50
  • @liamzebedee Do you think it'd be possible to implement these same functions in Swift? – Gabriel Garrett Jun 20 '16 at 15:26

8 Answers8

75

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.

Daniel Schmidt
  • 11,605
  • 5
  • 38
  • 70
  • 2
    background task is now supported in version 0.36, but android only – Feng Nov 07 '16 at 02:49
  • 1
    @Feng Do you have a link to the docs for the feature? I couldn't seem to find anything on a background-task feature built in to react-native. – Venryx Dec 28 '16 at 08:09
  • 1
    @Venryx https://facebook.github.io/react-native/blog/2016/10/25/0-36-headless-js-the-keyboard-api-and-more.html – Feng Dec 29 '16 at 01:45
37

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

Matthew Wilcoxson
  • 3,432
  • 1
  • 43
  • 48
  • 2
    Plus one for react-native-background-task! It integrates really well with my react-native-queue package (https://github.com/billmalarky/react-native-queue). If you scroll down to the "OS Background Task Full Example" you can see how the queue handles management of the jobs for you so the 30 second limit on iOS and Android background tasks is not a pain to deal with. – billmalarky Jan 05 '18 at 02:03
  • 3
    I've made use of this library in my app, but it didn't run the task that I set for being run regularly. Is it normal?? – simaAttar Sep 25 '19 at 09:32
  • 10
    The react-native-background-task project appears to be abandoned. No commit since 2017 and issues/pull requests are piling up. So this probably isn't the way to go nowadays. – eega Mar 08 '20 at 12:52
22

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 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 background
    console.log('tac');
}, 10000);

// Cancel the timeout if necessary
BackgroundTimer.clearTimeout(timeoutId);
HoldOffHunger
  • 18,769
  • 10
  • 104
  • 133
Venryx
  • 15,624
  • 10
  • 70
  • 96
  • Thanks! But this module does not work if I kill app from process, do you now similar modules, that work even I will kill app ? – Kholiavko Jan 12 '17 at 22:56
  • @Kholiavko Sorry, no. I know you can accomplish that, through use of the alarm service, but don't know of a module that helps you do so. – Venryx Jan 12 '17 at 23:16
  • 1
    @chapeljuice, yes, see this module https://github.com/vikeri/react-native-background-job – Kholiavko Aug 10 '17 at 06:28
  • Hello! This plugin seems to be Android only. Do you know of any solution for iOS? – Simon Eliasson Aug 10 '17 at 15:25
  • @SimonEliasson Look at Matt's answer. react-native-background-task is what you are looking for. I'd also suggest you use react-native-queue for task management. That way you don't have to worry about rolling your own timeout/retry logic for tasks since there is that 30 second limit you will have to account for. – billmalarky Jan 05 '18 at 02:07
19

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.

Provash
  • 1,892
  • 3
  • 20
  • 28
  • I've made use of react-native-background-fetch library in my app, but it runs the wanted tasks only a few times per day. Is it normal?? – simaAttar Sep 25 '19 at 09:33
12

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.

frontendloader
  • 365
  • 4
  • 12
  • 4
    I'm using this one https://github.com/mauron85/react-native-background-geolocation that seems pretty similar but also free for Android. – simlmx Oct 23 '16 at 16:20
  • @simlmx I have used react-native-background-geolocation but it doen't exit stationary region from background or app close, Please check my configurations here https://stackoverflow.com/questions/61889407/location-not-updating-on-server-when-app-enters-stationary-when-app-is-in-backgr I would appreciate any help, thanks in advance – coffee May 20 '20 at 11:19
2

With the use of endless task management system in android You can run the task in the background theater the app is in background or the app is in kill mode.

You can use native bridge to do that or You can use the package Example Explaned here:

React-native package to do the same WithOut bridging react-native-endless-background-service-without-notification

Lingaraj Sahoo
  • 51
  • 2
1

To run some task periodically in background then EXPO fetch also an option, here is the documentation.

https://docs.expo.dev/versions/latest/sdk/background-fetch/
Rohit Parte
  • 3,365
  • 26
  • 26
-10

We solved this my writing our own module in Android and iOS and used event to notify front end

asmitB
  • 19
  • 5