React Native Geolocation API for Android and iOS. It allows to get geolocation in foreground (and probably in background but background is no longer maintained).
Install the library using Yarn:
yarn add @mobeye/react-native-geolocationsee the example for more complete usage
import React, { useEffect, useState, useRef } from 'react';
import { View, Text, PermissionsAndroid, Platform } from 'react-native';
import Geolocation, { useLocation } from '@mobeye/react-native-geolocation';
export const App = () => {
const [permission, setPermission] = useState(false);
const prevPermission = useRef(false);
const location = useLocation();
useEffect(() => {
Geolocation.configuration({
distanceFilter: 500,
desiredAccuracy: 'BalancedPower',
bufferSize: 10,
}).catch(console.log);
}, []);
useEffect(() => {
Geolocation.checkAuthorization().then((isGranted) => {
if (isGranted) {
setPermission(isGranted);
} else {
Geolocation.requestAuthorization().then((status) => {
setPermission(status === 'granted');
});
}
});
}, []);
useEffect(() => {
if (!prevPermission.current && permission) {
Geolocation.start();
}
prevPermission.current = permission;
}, [permission]);
return (
<View>
<Text>Latitude: {location.latitude.toString()}</Text>
<Text>Longitude: {location.longitude.toString()}</Text>
<Text>Accuracy: {location.accuracy.toString()}</Text>
<Text>Is from mock provider: {location.mock.toString()}</Text>
</View>
);
};- Types:
- Methods:
- Events:
The configuration options for the library:
| Property | Type | Description |
|---|---|---|
distanceFilter |
number |
The minimum distance in meters a device must move before an update event is generated. |
desiredAccuracy |
AccuracyLevel |
The accuracy of the location data that your app wants to receive. |
updateInterval |
number |
The rate in milliseconds at which your app prefers to receive location updates. Used only by Android. |
bufferSize |
number |
The number of previous computed location keeps in memory. |
Describes different accuracy level available:
| Value | Description |
|---|---|
'PowerSaving' |
Largely relies on cell towers and avoids GPS and Wi-Fi inputs, providing coarse (city-level) accuracy with minimal battery drain. |
'BalancedPower' |
Typically uses a combination of Wi-Fi and cell information to compute device location. Very rarely uses GPS. |
'BestAccuracy' |
Provides the most accurate location possible, which is computed using as many inputs as necessary and may cause significant battery drain. |
'NavigationAccuracy' |
This level of accuracy is intended for use in navigation apps that require precise position information at all times. |
Note that the NavigationAccuracy and BestAccuracy have the same effect on Android and that NavigationAccuracy is usable only if the phone is plugged in.
Describes different accuracy authorization levels:
| Value | Description |
|---|---|
'ReducedAccuracy' |
Only approximate location is available. |
'FullAccuracy' |
Precise location is available, the 'AccuracyLevel' can be set to any value. |
Describes location providers status on android phones:
| Property | Type | Description |
|---|---|---|
isGPSLocationEnabled |
boolean |
Represents the status of the GPS location provider on android. |
isNetworkLocationEnabled |
boolean |
Represents the status of the Network location provider on android. |
Describe a computed location:
| Property | Type | Description |
|---|---|---|
latitude |
number |
The latitude in degrees. Positive values indicate latitudes north of the equator. Negative values indicate latitudes south of the equator. |
longitude |
number |
The longitude in degrees. Measurements are relative to the zero meridian, with positive values extending east of the meridian and negative values extending west of the meridian. |
accuracy |
number |
The location’s latitude and longitude identify the center of the circle, and this value indicates the radius in meter of that circle. A negative value indicates that the latitude and longitude are invalid. |
time |
number |
The time at which this location was determined. It is an Unix Time Stamp in seconds. |
mock |
boolean |
Returns true if the Location came from a mock provider. Works only for Android, always return false on IOS |
Describes a success new location event:
| Property | Type | Description |
|---|---|---|
success |
true |
To indicate that it's a success event |
payload |
Location |
The new Location object |
(iOS only) Describes an error new location event:
| Property | Type | Description |
|---|---|---|
success |
false |
To indicate that it's an error event |
payload |
LocationError (deprecated) |
A number corresponding to an error (see end of this page) |
Describes a new location event:
He can be either a LocationEventSuccess or a LocationEventError on ios, and only a LocationEventSuccess on Android.
Configure the library with the given configuration and instantiate the provider service. You only need to supply the properties you want to change from the default values. Any other methods will not work if the service is not instantiated. This method can be called only once. Can return a rejected promise if your configuration is invalid.
Example:
Geolocation.configure({
distanceFilter: 100,
desiredAccuracy: 'BalancedPower',
bufferSize: 10,
}).catch(console.log);Start the service using options defined with configure().
Example:
Geolocation.start();A React Hook which can be used to get access to the last computed location and to follow updates when the location significantly changes. It returns a hook with the Location type.
Example:
const YourComponent = () => {
const location = useLocation();
return (
<View>
<Text>Latitude: {location.latitude.toString()}</Text>
<Text>Longitude: {location.longitude.toString()}</Text>
<Text>Accuracy: {location.accuracy.toString()}</Text>
<Text>Is from mock provider: {location.mock.toString()}</Text>
</View>
);
};Return a Promise that gets last locations saved in the buffer. You can optionally send a number of locations you need to retrieve. Without number, the method returns all saved locations in the buffer.
Example:
Geolocation.getLastLocations(10).then((locations) => {
const lastLocation = locations[0];
console.log('Latitude', lastLocation.latitude);
console.log('Longitude', lastLocation.longitude);
});Sometime you may need to temporary change the accuracy level to have a better user tracking. This method changes on the fly your configuration (except the buffer size). Can return a rejected promise if your configuration is invalid
Example:
Geolocation.setTemporaryConfiguration({
distanceFilter: 20,
desiredAccuracy: 'BestAccuracy',
}).catch(console.log);Reset configuration with the LocationConfiguration used with configure().
Example
Geolocation.revertTemporaryConfiguration();Return a Promise that gets the location permission status as boolean.
Example:
import { useEffect } from 'react';
import { Platform } from 'react-native';
import Geolocation from '@mobeye/react-native-geolocation';
const YourComponent = () => {
const [permission, setPermission] = useState(false);
useEffect(() => {
Geolocation.checkAuthorization().then((status) => setPermission(status));
}, []);
return (
<View>
<Text>Do you have permission? {permission.toString()}</Text>
</View>
);
};
⚠️ In the futur, Apple may add new authorizations. Do not hesitate to create a pull request to add the new authorization.
Requests the geolocation permission. Returns a Promise that resolves to a PermissionStatus.
import { useEffect, useState } from 'react';
import { Platform, PermissionStatus } from 'react-native';
import Geolocation from '@mobeye/react-native-geolocation';
const YourComponent = () => {
const [status, setStatus] = useState(PermissionStatus.denied);
useEffect(() => {
Geolocation.requestAuthorization().then((status) => setStatus(status));
}, []);
return (
<View>
<Text>Do you have permission? {status}</Text>
</View>
);
};Requests the geolocation accuracy authorization. Returns a Promise that resolves to a AccuracyAuthorization
import { useEffect, useState } from 'react';
import { Platform } from 'react-native';
import Geolocation from '@mobeye/react-native-geolocation';
const YourComponent = () => {
const [status, setStatus] = useState(null);
useEffect(() => {
Geolocation.checkAccuracyAuthorization().then((status) => setStatus(status));
}, []);
return (
<View>
<Text>Accuracy authorization level: {status}</Text>
</View>
);
};Requests the location providers status. Returns a Promise that resolves to a LocationProviderStatus
Example:
import { useEffect, useState } from 'react';
import { Platform } from 'react-native';
import Geolocation, { LocationProvidersStatus } from '@mobeye/react-native-geolocation';
const YourComponent = () => {
const [locationProvidersStatus, setLocationProvidersStatus] =
useState <
LocationProvidersStatus >
{
isGPSLocationEnabled: false,
isNetworkLocationEnabled: false,
};
useEffect(() => {
if (Platform.OS === 'android') {
Geolocation.getAndroidLocationProvidersStatus().then((statuses) => setLocationProvidersStatus(statuses));
}
}, []);
return (
<View>
<Text>Is GPS location enabled? {locationProvidersStatus.isGPSLocationEnabled}</Text>
<Text>Is Network location enabled? {locationProvidersStatus.isNetworkLocationEnabled}</Text>
</View>
);
};Requests to determine whether the location settings are enabled on android phones. If the settings must be changed then a dialog that prompts the user for permission to modify the location settings should be displayed. It returns an error which when it fails. For more information please check this link
Example:
Geolocation.checkAndroidLocationSettings().catch(console.log);If useLocation() and getLastLocations() are not enough for you, you can subscribe to this event to be informed of each new location update.
Example:
import { LocationEvent, locationEmitter, getLastLocations, Location } from '@mobeye/react-native-geolocation';
useEffect(() => {
/* get last known use position */
getLastLocations(1)
.then((lastLocations: Location[]) => {
const lastLocation = lastLocations[0];
lastLocation && console.log('Latitude', lastLocation.latitude);
lastLocation && console.log('Longitude', lastLocation.longitude);
})
.catch(console.log);
/* subscribe to the listener */
const subscription = locationEmitter.addListener('LOCATION_UPDATED', (result: LocationEvent) => {
if (result.success) {
location = result.payload;
console.log('Latitude', location.latitude);
console.log('Longitude', location.longitude);
} else {
console.log("Can't get location: " + result.payload);
}
});
return () => subscription.remove();
}, []);(Android only)
You can subscribe this event to follow location provider state changes.
Example:
import {
LocationProvidersStatus,
locationEmitter,
getAndroidLocationProvidersStatus,
} from '@mobeye/react-native-geolocation';
useEffect(() => {
if (Platform.OS === 'android') {
// update location providers status when app starts
getAndroidLocationProvidersStatus()
.then((locationProvidersStatus: LocationProvidersStatus) => {
console.log('isGPSLocationEnabled', locationProvidersStatus.isGPSLocationEnabled);
console.log('isNetworkLocationEnabled', locationProvidersStatus.isNetworkLocationEnabled);
})
.catch(console.log);
// keep listening to any location providers status while using app
const locationProviderListener = Geolocation.locationEmitter.addListener(
'Location_check',
(locationProvidersStatus: LocationProvidersStatus) => {
console.log('isGPSLocationEnabled', locationProvidersStatus.isGPSLocationEnabled);
console.log('isNetworkLocationEnabled', locationProvidersStatus.isNetworkLocationEnabled);
}
);
return () => locationProviderListener.remove();
}
return () => null;
}, []);You can run a simple example present in the module to test the geolocation. First, you need to install node_modules and example pods:
yarn && cd example/ios/ && pod install && cd - && yarn startThen, open the example directory with xcode or android studio to build the example.
- See LICENSE
Built and maintained by Mobeye.