Home

Awesome

@react-native-community/geolocation

npm Supports Android, iOS and web MIT License

The Geolocation API 📍 module for React Native that extends the Geolocation web spec.

Supports TurboModules ⚡️ and legacy React Native architecture.

Fully compatible with TypeScript.

Supports modern Play Services Location API.

Supported platforms

PlatformSupport
iOS
Android
Web
Windows
macOS

Compatibility

React NativeRNC Geoloaction
>= 0.73.0>= 3.2.0
>= 0.70.0>= 3.0.0 < 3.2.0
>= 0.64.02.x.x
<= 0.63.01.x.x

Getting started

yarn add @react-native-community/geolocation

or

npm install @react-native-community/geolocation --save

Configuration and Permissions

<div class="banner-crna-ejected"> <h3>Projects with Native Code Only</h3> <p> This section only applies to projects made with <code>react-native init</code> or to those made with <code>expo init</code> or Create React Native App which have since ejected. For more information about ejecting, please see the <a href="https://github.com/react-community/create-react-native-app/blob/master/EJECTING.md" target="_blank">guide</a> on the Create React Native App repository. </p> </div>

iOS

You need to include NSLocationWhenInUseUsageDescription and NSLocationAlwaysAndWhenInUseUsageDescription in Info.plist to enable geolocation when using the app. If your app supports iOS 10 and earlier, the NSLocationAlwaysUsageDescription key is also required. If these keys are not present in the Info.plist, authorization requests fail immediately and silently. Geolocation is enabled by default when you create a project with react-native init.

In order to enable geolocation in the background, you need to include the 'NSLocationAlwaysUsageDescription' key in Info.plist and add location as a background mode in the 'Capabilities' tab in Xcode.

IOS >= 15 Positions will also contain a mocked boolean to indicate if position was created from a mock provider / software.

Android

To request access to location, you need to add the following line to your app's AndroidManifest.xml:

<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

or

<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />

Android API >= 18 Positions will also contain a mocked boolean to indicate if position was created from a mock provider.

<p> Android API >= 23 Requires an additional step to check for, and request the ACCESS_FINE_LOCATION or ACCESS_COARSE_LOCATION permissions using the <a href="https://reactnative.dev/docs/permissionsandroid.html" target="_blank">PermissionsAndroid API</a>. Failure to do so may result in a hard crash. </p> <details> <summary><b>For React Native < 0.65 on Android we need to link manually</b></summary>
include ':react-native-community-geolocation'
project(':react-native-community-geolocation').projectDir = new File(rootProject.projectDir, '../node_modules/@react-native-community/geolocation/android')
dependencies {
   ...
   implementation project(':react-native-community-geolocation')
}
import com.reactnativecommunity.geolocation.GeolocationPackage;

In the class at getPackages method:

@Override
protected List<ReactPackage> getPackages() {
      @SuppressWarnings("UnnecessaryLocalVariable")
      List<ReactPackage> packages = new PackageList(this).getPackages();
      // Packages that cannot be autolinked yet can be added manually here, for example:
      packages.add(new GeolocationPackage()); // <== add this line
      return packages;
}
</details>

Migrating from the core react-native module

This module was created when the Geolocation was split out from the core of React Native. As a browser polyfill, this API was available through the navigator.geolocation global - you didn't need to import it. To migrate to this module you need to follow the installation instructions above and change following code:

navigator.geolocation.setRNConfiguration(config);

to:

import Geolocation from '@react-native-community/geolocation';

Geolocation.setRNConfiguration(config);

If you need to have geolocation API aligned with the browser (cross-platform apps), or want to support backward compatibility, please consider adding following lines at the root level, for example at the top of your App.js file (only for react native):

navigator.geolocation = require('@react-native-community/geolocation');

Usage

Example

import Geolocation from '@react-native-community/geolocation';

Geolocation.getCurrentPosition(info => console.log(info));

Check out the example project for more examples.

Methods

Summary


Details

setRNConfiguration()

Sets configuration options that will be used in all location requests.

Geolocation.setRNConfiguration(
  config: {
    skipPermissionRequests: boolean;
    authorizationLevel?: 'always' | 'whenInUse' | 'auto';
    enableBackgroundLocationUpdates?: boolean;
    locationProvider?: 'playServices' | 'android' | 'auto';
  }
) => void

Supported options:


requestAuthorization()

Request suitable Location permission.

  Geolocation.requestAuthorization(
    success?: () => void,
    error?: (
      error: {
        code: number;
        message: string;
        PERMISSION_DENIED: number;
        POSITION_UNAVAILABLE: number;
        TIMEOUT: number;
      }
    ) => void
  )

On iOS if NSLocationAlwaysUsageDescription is set, it will request Always authorization, although if NSLocationWhenInUseUsageDescription is set, it will request InUse authorization.


getCurrentPosition()

Invokes the success callback once with the latest location info.

  Geolocation.getCurrentPosition(
    success: (
      position: {
        coords: {
          latitude: number;
          longitude: number;
          altitude: number | null;
          accuracy: number;
          altitudeAccuracy: number | null;
          heading: number | null;
          speed: number | null;
        };
        timestamp: number;
      }
    ) => void,
    error?: (
      error: {
        code: number;
        message: string;
        PERMISSION_DENIED: number;
        POSITION_UNAVAILABLE: number;
        TIMEOUT: number;
      }
    ) => void,
    options?: {
        timeout?: number;
        maximumAge?: number;
        enableHighAccuracy?: boolean;
    }
  )

Supported options:


watchPosition()

Invokes the success callback whenever the location changes. Returns a watchId (number).

  Geolocation.watchPosition(
    success: (
      position: {
        coords: {
          latitude: number;
          longitude: number;
          altitude: number | null;
          accuracy: number;
          altitudeAccuracy: number | null;
          heading: number | null;
          speed: number | null;
        };
        timestamp: number;
      }
    ) => void,
    error?: (
      error: {
        code: number;
        message: string;
        PERMISSION_DENIED: number;
        POSITION_UNAVAILABLE: number;
        TIMEOUT: number;
      }
    ) => void,
    options?: {
      interval?: number;
      fastestInterval?: number;
      timeout?: number;
      maximumAge?: number;
      enableHighAccuracy?: boolean;
      distanceFilter?: number;
      useSignificantChanges?: boolean;
    }
  ) => number

Supported options:


clearWatch()

Clears watch observer by id returned by watchPosition()

Geolocation.clearWatch(watchID: number);

Maintainers

This module is developed and maintained by michalchudziak.

I owe a lot to the fantastic React & React Native community, and I contribute back with my free time 👨🏼‍💼💻 so if you like the project, please star it ⭐️!

If you need any help with this module, or anything else, feel free to reach out to me! I provide boutique consultancy services for React & React Native. Just visit my website, or send me an email at hello@michalchudziak.dev 🙏🏻

Contributors

This module was extracted from react-native core. Please refer to https://github.com/react-native-community/react-native-geolocation/graphs/contributors for the complete list of contributors.

License

The library is released under the MIT licence. For more information see LICENSE.