Ionic 5 React Background Geolocation

Question

I am trying to develop Ionic React app for Android / iOS with using Background Geolocation plugin:

https://ionicframework.com/docs/native/background-geolocation

I am following documentation and did install:

npm install @mauron85/cordova-plugin-background-geolocation
npm install @ionic-native/background-geolocation

When I compile a code I did an error:

Failed to compile.

. ode_modules@ionic-native\background-geolocation gx\index.js Cannot find module: '@angular/core'. Make sure this package is installed.

You can install this package by running: npm install @angular/core.

[ERROR] An error occurred while running subprocess react-scripts.
    react-scripts.cmd build exited with exit code 1.

    Re-running this command with the --verbose flag may provide more information.

So I have installed also @angular/core (dont know why as I am using React but whatever).

In documentation is written:

BackgroundGeolocation must be called within app.ts and or before Geolocation. Otherwise the platform will not ask you for background tracking permission.

So I did open App.tsx and start copy & paste code:

import React, { Component } from "react";
import { Redirect, Route } from "react-router-dom";
import { IonApp, IonRouterOutlet } from "@ionic/react";
import { IonReactRouter } from "@ionic/react-router";
import GPS from "./pages/GPS";

import {
  BackgroundGeolocation,
  BackgroundGeolocationConfig,
  BackgroundGeolocationEvents,
  BackgroundGeolocationResponse,
} from "@ionic-native/background-geolocation/ngx";

/* Core CSS required for Ionic components to work properly */
import "@ionic/react/css/core.css";

/* Basic CSS for apps built with Ionic */
import "@ionic/react/css/normalize.css";
import "@ionic/react/css/structure.css";
import "@ionic/react/css/typography.css";

/* Optional CSS utils that can be commented out */
import "@ionic/react/css/padding.css";
import "@ionic/react/css/float-elements.css";
import "@ionic/react/css/text-alignment.css";
import "@ionic/react/css/text-transformation.css";
import "@ionic/react/css/flex-utils.css";
import "@ionic/react/css/display.css";

/* Theme variables */
import "./theme/variables.css";

class App extends Component {
  constructor(
    props: any,
    private backgroundGeolocation: BackgroundGeolocation
  ) {
    super(props);

    const config: BackgroundGeolocationConfig = {
      desiredAccuracy: 10,
      stationaryRadius: 20,
      distanceFilter: 30,
      debug: true, //  enable this hear sounds for background-geolocation life-cycle.
      stopOnTerminate: false, // enable this to clear background location settings when the app terminates
    };

    this.backgroundGeolocation.configure(config).then(() => {
      this.backgroundGeolocation
        .on(BackgroundGeolocationEvents.location)
        .subscribe((location: BackgroundGeolocationResponse) => {
          console.log(location);

          // IMPORTANT:  You must execute the finish method here to inform the native plugin that you're finished,
          // and the background-task may be completed.  You must do this regardless if your operations are successful or not.
          // IF YOU DON'T, ios will CRASH YOUR APP for spending too much time in the background.
          this.backgroundGeolocation.finish(); // FOR IOS ONLY
        });
    });
  }

  render() {

    return (
      
        
          
            
             } />
          
        
      
    );
  }
}

export default App;

And when I save the file and build the project I am getting this error:

[react-scripts] F:/hybrid-app-development/job/sportis/gps-tracking/src/App.tsx
[react-scripts] TypeScript error in F:/hybrid-app-development/job/sportis/gps-tracking/src/App.tsx(48,32):
[react-scripts] Property 'configure' does not exist on type 'BackgroundGeolocation'.  TS2339
[react-scripts]     46 |     };
[react-scripts]     47 | 
[react-scripts]   > 48 |     this.backgroundGeolocation.configure(config).then(() => {
[react-scripts]        |                                ^
[react-scripts]     49 |       this.backgroundGeolocation
[react-scripts]     50 |         .on(BackgroundGeolocationEvents.location)
[react-scripts]     51 |         .subscribe((location: BackgroundGeolocationResponse) => {

Here is a list of dependencies, hope everything is installed how it should:

"dependencies": {
    "@angular/core": "^11.0.7",
    "@capacitor/android": "^2.4.5",
    "@capacitor/core": "2.4.5",
    "@ionic-native/android-permissions": "^5.30.0",
    "@ionic-native/background-geolocation": "^5.30.0",
    "@ionic-native/core": "^5.30.0",
    "@ionic-native/location-accuracy": "^5.30.0",
    "@ionic/react": "^5.0.7",
    "@ionic/react-router": "^5.0.7",
    "@mauron85/cordova-plugin-background-geolocation": "^3.1.0",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.4.0",
    "@testing-library/user-event": "^8.0.3",
    "@types/jest": "^24.0.25",
    "@types/node": "^12.12.24",
    "@types/react": "^16.9.17",
    "@types/react-dom": "^16.9.4",
    "@types/react-router": "^5.1.4",
    "@types/react-router-dom": "^5.1.3",
    "cordova-plugin-android-permissions": "^1.1.2",
    "cordova-plugin-mauron85-background-geolocation": "^2.2.5",
    "cordova-plugin-request-location-accuracy": "^2.3.0",
    "ionicons": "^5.0.0",
    "react": "^16.13.0",
    "react-dom": "^16.13.0",
    "react-router": "^5.1.2",
    "react-router-dom": "^5.1.2",
    "react-scripts": "^3.4.4",
    "react-useinterval": "^1.0.2",
    "typescript": "3.8.3"
  },

Any idea what is wrong? Thank you very much!

Ionic 5 React Background Geolocation

Answers (1)

Related Questions