Background function with React Native

2

I have two functions, one that takes the current position of the geolocation and another that performs this function in a certain period of time. I have a button that I use to initialize and pause this function, but I would like to run this function in the background while the device is locked.

Currently React Native has Headless JS to run background functions. I made a simple test with the function GeolocationTask() below, which increments a value and displays an alert, but did not work.

I would like to know how to properly use Headless JS or some other alternative to perform functions even with the locked device or app in the background.

PS: I'm using Geolocation to get the coordinates, but I have not put it here for simplicity because the goal is to know how to perform functions even with the app in the background.

GeolocationTask.js:

module.exports = async (taskData) => {
  this.interval = setInterval(() => {
    taskData++;
    alert(taskData.toString());
  }, 2000);
}

Note: I import this component into a screen when I press a button.

index.android.js:

import React from 'react';
import { AppRegistry } from 'react-native';
import GeolocationTask from './src/components/GeolocationTask';
import App from './src/App';

const appColeta = () => (
  <App />
);

AppRegistry.registerHeadlessTask('GeolocationTask', () => GeolocationTask);
AppRegistry.registerComponent('appColeta', () => appColeta);

GeolocationTask.java:

import android.content.Intent;
import android.os.Bundle;
import com.facebook.react.HeadlessJsTaskService;
import com.facebook.react.bridge.Arguments;
import com.facebook.react.bridge.WritableMap;
import com.facebook.react.jstasks.HeadlessJsTaskConfig;

public class GeolocationTask extends HeadlessJsTaskService {

  @Override
  protected HeadlessJsTaskConfig getTaskConfig(Intent intent) {
  Bundle extras = intent.getExtras();
  // Following line just to be sure it does not silently fail
  WritableMap data = extras != null ? Arguments.fromBundle(extras) : null;
  return new HeadlessJsTaskConfig(
    "GeolocationTask", // Use the registered headless Task here
    data,
    5000);
  }
}

AndroidManifest.xml:

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.appcoleta"
    android:versionCode="1"
    android:versionName="1.0">

    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />


    <uses-sdk
        android:minSdkVersion="16"
        android:targetSdkVersion="22" />

    <application
      android:name=".MainApplication"
      android:allowBackup="true"
      android:label="@string/app_name"
      android:icon="@mipmap/ic_launcher"
      android:theme="@style/AppTheme">
      <activity
        android:name=".MainActivity"
        android:label="@string/app_name"
        android:configChanges="keyboard|keyboardHidden|orientation|screenSize"
        android:windowSoftInputMode="adjustResize">
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
      </activity>
        <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
        <service android:name=".GeolocationTask" android:enabled="true" android:label="GeolocationTask" />
    </application>

</manifest>
    
asked by anonymous 30.06.2017 / 22:17

2 answers

0

Have you tried using React-Native's Geolocation ? It has a watchPosition () function, it does not exactly run in the background, but it might work.

Geolocation

    
05.07.2017 / 13:51
0

To work with this, you need to implement AppState. It informs you through events, when the phone is active, inactive, etc.

AppState Documentation

    
22.08.2017 / 22:21