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-nativeackground-geolocation
gxindex.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 (
<IonApp>
<IonReactRouter>
<IonRouterOutlet>
<Route
path="/gps"
component={GPS}
exact={true}
/>
<Route exact path="/" render={() => <Redirect to="/gps" />} />
</IonRouterOutlet>
</IonReactRouter>
</IonApp>
);
}
}
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!
