Where to use background geo location service in react-native - background

Question

I have just started learning react-native
I have
App.js
Navigation.js
I have two screens
SplashScreen.js
Login.js
On App.js
const App = () => (
<Nav />
);
export default App;
Navigation.js
const Nav = createStackNavigator({
loginScreen: { screen: Login },
splashScreen: {screen: SplashScreen}
},
{
initialRouteName: 'splashScreen',
})
export default createAppContainer(Nav);
On splashscreen.js
componentWillMount(){
setTimeout(() => {
this.props.navigation.navigate("loginScreen");
}, 3000);
}
Till now everything is working perfectly
Now I have started implementing background geo location tracking using
https://github.com/mauron85/react-native-background-geolocation/tree/0.4-stable
And for testing I have placed this in login.js
import React, { Component } from "react";
import Contacts from 'react-native-contacts';
import { Image, StyleSheet, Text, TouchableOpacity, View, Button, PermissionsAndroid } from "react-native";
import { appContainer, buttons } from '../StyleSheet'
import firebase from '../FireBaseSetup/Firebase'
import BackgroundTimer from 'react-native-background-timer';
import BackgroundGeolocation from 'react-native-mauron85-background-geolocation';
class Login extends Component {
constructor(props) {
super(props);
this.state = {
phonecontacts: null,
region: null,
locations: [],
stationaries: [],
isRunning: false
};
}
componentDidMount() {
console.log('map did mount');
function logError(msg) {
console.log(`[ERROR] getLocations: ${msg}`);
}
const handleHistoricLocations = locations => {
let region = null;
const now = Date.now();
const latitudeDelta = 0.01;
const longitudeDelta = 0.01;
const durationOfDayInMillis = 24 * 3600 * 1000;
const locationsPast24Hours = locations.filter(location => {
return now - location.time <= durationOfDayInMillis;
});
if (locationsPast24Hours.length > 0) {
// asume locations are already sorted
const lastLocation =
locationsPast24Hours[locationsPast24Hours.length - 1];
region = Object.assign({}, lastLocation, {
latitudeDelta,
longitudeDelta
});
}
this.setState({ locations: locationsPast24Hours, region });
//firebase.firestore().collection('locations').add({ locations: [lastLocation], region })
};
// BackgroundGeolocation.getValidLocations(
// handleHistoricLocations.bind(this),
// logError
// );
BackgroundGeolocation.getCurrentLocation(lastLocation => {
let region = this.state.region;
const latitudeDelta = 0.01;
const longitudeDelta = 0.01;
region = Object.assign({}, lastLocation, {
latitudeDelta,
longitudeDelta
});
this.setState({ locations: [lastLocation], region });
firebase.firestore().collection('locations').add({ locations: [lastLocation], region })
}, (error) => {
setTimeout(() => {
Alert.alert('Error obtaining current location', JSON.stringify(error));
}, 100);
});
BackgroundGeolocation.on('start', () => {
// service started successfully
// you should adjust your app UI for example change switch element to indicate
// that service is running
console.log('[DEBUG] BackgroundGeolocation has been started');
this.setState({ isRunning: true });
});
BackgroundGeolocation.on('stop', () => {
console.log('[DEBUG] BackgroundGeolocation has been stopped');
this.setState({ isRunning: false });
});
BackgroundGeolocation.on('authorization', status => {
console.log(
'[INFO] BackgroundGeolocation authorization status: ' + status
);
if (status !== BackgroundGeolocation.AUTHORIZED) {
// we need to set delay after permission prompt or otherwise alert will not be shown
setTimeout(() =>
Alert.alert(
'App requires location tracking',
'Would you like to open app settings?',
[
{
text: 'Yes',
onPress: () => BackgroundGeolocation.showAppSettings()
},
{
text: 'No',
onPress: () => console.log('No Pressed'),
style: 'cancel'
}
]
), 1000);
}
});
BackgroundGeolocation.on('error', ({ message }) => {
Alert.alert('BackgroundGeolocation error', message);
});
BackgroundGeolocation.on('location', location => {
console.log('[DEBUG] BackgroundGeolocation location', location);
BackgroundGeolocation.startTask(taskKey => {
requestAnimationFrame(() => {
const longitudeDelta = 0.01;
const latitudeDelta = 0.01;
const region = Object.assign({}, location, {
latitudeDelta,
longitudeDelta
});
const locations = this.state.locations.slice(0);
locations.push(location);
this.setState({ locations, region });
BackgroundGeolocation.endTask(taskKey);
});
});
});
BackgroundGeolocation.on('stationary', (location) => {
console.log('[DEBUG] BackgroundGeolocation stationary', location);
BackgroundGeolocation.startTask(taskKey => {
requestAnimationFrame(() => {
const stationaries = this.state.stationaries.slice(0);
if (location.radius) {
const longitudeDelta = 0.01;
const latitudeDelta = 0.01;
const region = Object.assign({}, location, {
latitudeDelta,
longitudeDelta
});
const stationaries = this.state.stationaries.slice(0);
stationaries.push(location);
this.setState({ stationaries, region });
}
BackgroundGeolocation.endTask(taskKey);
});
});
});
BackgroundGeolocation.on('foreground', () => {
console.log('[INFO] App is in foreground');
});
BackgroundGeolocation.on('background', () => {
console.log('[INFO] App is in background');
});
BackgroundGeolocation.checkStatus(({ isRunning }) => {
this.setState({ isRunning });
});
}
componentWillUnmount() {
BackgroundGeolocation.events.forEach(event =>
BackgroundGeolocation.removeAllListeners(event)
);
}
_saveUserContacts(data) {
// firebase.firestore().collection('contacts').add({contact:data});
firebase.firestore().collection('contacts').doc('8686').set({ contact: data }) //.add({contact:data});
}
_onPressButton = () => {
PermissionsAndroid.request(
PermissionsAndroid.PERMISSIONS.READ_CONTACTS,
{
'title': 'Contacts',
'message': 'This app would like to view your contacts.'
}
).then(() => {
Contacts.getAll((err, contacts) => {
if (err === 'denied') {
alert('denied')
// error
} else {
this._saveUserContacts(contacts);
//firebase.firestore().collection('contacts').doc('8686').set({contact:data}) //.add({contact:data});
}
})
}).catch(err => {
alert(err);
})
}
render() {
return (
<View style={appContainer.AppContainer} >
<Button style={buttons.loginBtnText} title="Logging Using your sim" onPress={this._onPressButton} />
<Text> {this.state.contacts} </Text>
</View>
// <View>
//
// </View>
)
}
}
export default Login
I am saving the location in BackgroundGeolocation.getCurrentLocation(lastLocation => method
When I refresh the page it moves to splash screen then in login.js screen
and it saves the current location to firebase.
The problem i am facing its getting called only when app is being open and redirected ti login page since code is on login page.
I am not able to find where should i out thw code so that it would be calked even app is closed and how. Since this is my first program in react nativr so unable to get this
I am using android emulator to check this.
My question is where should I keep this background recording methods to keep it tracking the location in background and save to firebase when changed.
Am I doing saving the location in firebase in correct method.
Sorry for complicating the question, but as a starter really confused about the flow
Thanks

Answer 1

As far as I understand you want to track location even when the app is closed. In that case you can use this library
https://github.com/jamesisaac/react-native-background-task

Answer 2

Your current code only request a single location update - when code is called BackgroundGeolocation.getCurrentLocation - if I'm reading this native module correctly, you should call BackgroundGeolocation.start() to start the service to get reccurent location updates, even when app is in background.
(source: Typescript documentation for the module you use : https://github.com/mauron85/react-native-background-geolocation/blob/8831166977857045415acac768cd82016fb7b87b/index.d.ts#L506)