Background function with React Native

Question

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

Currently React Native has the Headless JS to run background functions. I ran 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 use the Headless JS correctly or some other alternative to perform functions even with the locked device or app in the background.

PS: I’m using Geolocation to pick up the coordinates, but not put here to simplify, 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: Import this component into a screen make the call by pressing a button.

index.androidjs.:

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>