How can I run background tasks in React Native?

Javascript Problem Overview

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?

Javascript Solutions

Solution 1 - Javascript

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.

Solution 2 - Javascript

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

Solution 3 - Javascript

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);

Solution 4 - Javascript

These libraries can help you to achieve your desired functionality:

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

Solution 5 - Javascript

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.

Solution 6 - Javascript

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

Solution 7 - Javascript

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

Content Type	Original Author	Original Content on Stackoverflow
Question	liamzebedee	View Question on Stackoverflow
Solution 1 - Javascript	Daniel Schmidt	View Answer on Stackoverflow
Solution 2 - Javascript	Matthew Wilcoxson	View Answer on Stackoverflow
Solution 3 - Javascript	Venryx	View Answer on Stackoverflow
Solution 4 - Javascript	Provash Shoumma	View Answer on Stackoverflow
Solution 5 - Javascript	frontendloader	View Answer on Stackoverflow
Solution 6 - Javascript	Lingaraj Sahoo	View Answer on Stackoverflow
Solution 7 - Javascript	asmitB	View Answer on Stackoverflow