react-native-geolocation-monitor uses iOS's CoreLocation and Android's location services to create and monitor circular geofences.
npm install react-native-geolocation-monitor --saveor using yarn:
yarn add react-native-geolocation-monitor$ react-native link react-native-geolocation-monitor
- In XCode, in the project navigator, right click
Libraries➜Add Files to [your project's name] - Go to
node_modules➜react-native-geolocation-monitorand addRNGeofence.xcodeproj - In XCode, in the project navigator, select your project. Add
libRNGeofence.ato your project'sBuild Phases➜Link Binary With Libraries - Run your project (
Cmd+R)
- Open up
android/app/src/main/java/[...]/MainActivity.java
- Add
import com.reactlibrary.RNGeofencePackage;to the imports at the top of the file - Add
new RNGeofencePackage()to the list returned by thegetPackages()method
- Append the following lines to
android/settings.gradle:include ':react-native-geolocation-monitor' project(':react-native-geolocation-monitor').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-geolocation-monitor/android') - Insert the following lines inside the dependencies block in
android/app/build.gradle:compile project(':react-native-geolocation-monitor')
In your AndroidManifest.xml add the following
...
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
<receiver
android:name="com.acurat.geofence.RNGeofenceBroadcastReceiver"
android:enabled="true"
android:exported="true" />
...
Add the NSLocationWhenInUseUsageDescription key and the NSLocationAlwaysAndWhenInUseUsageDescription key
to your Info.plist file.
(Xcode displays these keys as "Privacy - Location When In Use Usage Description" and
"Privacy - Location Always and When In Use Usage Description" in the Info.plist editor.)
If your app supports iOS 10 and earlier, add the NSLocationAlwaysUsageDescription key to your Info.plist file.
(Xcode displays this key as "Privacy - Location Always Usage Description" in the Info.plist editor.)
If you need updates when the app is in background mode, add the following to your Info.plist
<key>UIBackgroundModes</key>
<array>
<string>location</string>
</array>
import React, { Component } from 'react';
import { Text, View } from 'react-native';
import Geofence, { Constants } from 'react-native-geolocation-monitor';
export default class App extends Component {
subscription;
componentDidMount() {
Geofence.initialize({ requestPermission: true });
Geofence.add({
id: 'work',
radius: 50,
latitude: 37.422611,
longitude: -122.0840577,
})
.then(result => console.warn(result))
.catch(error => console.warn(JSON.stringify(error)));
this.subscription = Geofence.notify(result => {
console.warn(result);
});
}
componentWillUnmount() {
if (this.subscription) {
this.subscription.remove();
}
}
render() {
return (
<View
style={{
flex: 1,
justifyContent: 'center',
alignItems: 'center',
}}
>
<Text>Basic Usage!</Text>
</View>
);
}
}Initializes and requests permission from the user.
const params = {
requestPermission: true //Or false
};
RNGeofence.initialize(params);RNGeofence.requestPermission() must be called later if permission is not requested during initialization
Requests permission from the user.
RNGeofence.requestPermission();Checks and returns true if location permissions have been granted by the user. Else false is returned.
RNGeofence.checkPermission().then(result => console.info(result));
// result is a boolean Adds a circular region for monitoring. The promise resolves with an array of strings.
const region = {
id: 'work', // Unique identifier for the region, this is returned when a geofence transition occurs.
longitude: '-90.4436994',
latitude: '38.5419558',
radius: 100, // Optional, default: 50 meters
expirationDuration: 600000 // Optional in milliseconds, Android only, default: Never expires
};
RNGeofence.add(region).then(result => console.info(result));
// result is an String[] of one item containing IdAdds multiple regions at once for monitoring. The promise resolves with an array of strings.
const regions = [{
id: 'work',
longitude: '-90.4436994',
latitude: '38.5419558',
radius: 100,
expirationDuration: ''
}, {
id: 'disneyWorld',
longitude: '-81.5660627',
latitude: '28.385233',
}];
RNGeofence.addAll(regions).then(result => console.info(result));
// result is an String[] containing Ids of successfully added regionsRemove a region from monitoring. The promise resolves with an array of strings.
RNGeofence.remove('work').then(result => console.info(result));
// result is an String[] containing Ids of successfully added regionsRemoves multiple regions at once. The promise resolves with an array of strings.
RNGeofence.remove(['work', 'home']).then(result => console.info(result));
// result is an String[] containing Ids of successfully added regionsClears all geofences. This returns a promise that resolves with a void.
RNGeofence.clear();Counts all current geofences. Available only on iOS. The promise resolves with a number.
Android returns -1
RNGeofence.count()
.then(value => console.warn("# of regions currently monitored", value));
// value is a numberProvide a callback to notify that is called when a geofence transition occurs.
const subscription = Geofences.notify((response) => console.log(JSON.stringify(response)));
/*
response contains
{
transitionType: 'ENTER' | 'EXIT',
ids: string[] // Contains region ids that triggered transition
}
*/
// Be sure to `subscription.remove()` to avoid memory leaks (usually in `componentWillUnmount()`)