Geolocation in React Native

2020-10-02 hit count image

Let's see how to get user current geolocation to use react-native-geolocation-service library in React Native.

Outline

In this blog post, we’ll see how to get current geolocation in React Native. To get location information, we’ll use react-native-geolocation-service library. You can see the detail about react-native-geolocation-service library via the link below.

There is a source code about this blog post. If you want to see the source code, check the link below.

The example source code is based on the libraries below. If you want to know the details, check the links below.

How to install react-native-geolocation-service

Execute the link below to install react-native-geolocation-service.

npm install --save react-native-geolocation-service

we need to link the library to React Native project.

Version >= 0.60

Execute the commend below to link the library on iOS.

cd ios
pod install

To use react-native-geolocation-service You need to make iOS project to suppoert Swift. To make Swift supported, execute ios/[proejct name]xcworkspace file to open Xcode.

react-native-geolocation-service enable swift support

After Xcode is executed, right-click the folder on the top left, and click New File... menu.

react-native-geolocation-service select swift file

On the screen above, click Swift File and click Next on the right bottom.

react-native-geolocation-service select file name

Insert the file name whatever you want, and click Create button on the right bottom.

react-native-geolocation-service select create bridging header

On the screen above, click Create Bridging Header on the right bottom to make Swift supported.

Version <= 0.59

If you use React Native version <= 0.59, see the official site links below.

Configure Permission

Configure iOS Permission

To use the geolocation information on iOS, we need to configure the permissions like below in ios/[Project Name]/info.plist file.

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
  ...
  <key>NSLocationWhenInUseUsageDescription</key>
  <string>Program requires GPS to track cars and job orders</string>
  <key>NSLocationAlwaysUsageDescription</key>
  <string>Program requires GPS to track cars and job orders</string>
  <key>NSLocationAlwaysAndWhenInUseUsageDescription</key>
  <string>Program requires GPS to track cars and job orders</string>
  ...
</dict>
</plist>

If your app uses the geolocation on the foreground only, you need to set NSLocationWhenInUseUsageDescription only.

If your app needs to get the gelocation on the background, you also need to configure NSLocationAlwaysUsageDescription and NSLocationAlwaysAndWhenInUseUsageDescription, and set Location updates on Background Modes like below.

To get the geolocation on the background, open Xcode and click + Capability like below.

react-native-geolocation-service select capability for location updates background modes

When the Capability search screen is shown up, search Background Modes and double-click the result to add it.

react-native-geolocation-service search background modes for location updates background modes

After adding Background Modes, click Location updates on the Background Modes.

react-native-geolocation-service search background modes for location updates background modes

After configuration, you should use the code below to get the permission.

import {Platform} from 'react-native';
import Geolocation from 'react-native-geolocation-service';
...
useEffect(() => {
  if (Platform.OS === 'ios') {
    Geolocation.requestAuthorization('always');
  }
}, []);
...

Configure Android Permission

Open android/app/src/main/AndroidManifest.xml file and modify it like below to get user location information on Android.

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
  package="com.reactnativegeolocationserviceexample">

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

    <application

How to use

we can get the geolocation to use react-native-geolocation library like below.

How to get current geolocation

The code below is about how to get current geolocation.

Geolocation.getCurrentPosition(
    (position) => {
        console.log(position);
    },
    (error) => {
        // See error code charts below.
        console.log(error.code, error.message);
    },
    { enableHighAccuracy: true, timeout: 15000, maximumAge: 10000 }
);

The example below is the full source code about how to get current geolocation.

import React, {useState, useEffect} from 'react';
import Styled from 'styled-components/native';
import Geolocation from 'react-native-geolocation-service';

const Container = Styled.View`
    flex: 1;
    justify-content: center;
    align-items: center;
`;

const Label = Styled.Text`
    font-size: 24px;
`;

interface ILocation {
  latitude: number;
  longitude: number;
}

const CurrentPosition = () => {
  const [location, setLocation] = useState<ILocation | undefined>(undefined);

  useEffect(() => {
    Geolocation.getCurrentPosition(
      position => {
        const {latitude, longitude} = position.coords;
        setLocation({
          latitude,
          longitude,
        });
      },
      error => {
        console.log(error.code, error.message);
      },
      {enableHighAccuracy: true, timeout: 15000, maximumAge: 10000},
    );
  }, []);

  return (
    <Container>
      {location ? (
        <>
          <Label>Latitude: {location.latitude}</Label>
          <Label>Latitude: {location.longitude}</Label>
        </>
      ) : (
        <Label>Loading...</Label>
      )}
    </Container>
  );
};

export default CurrentPosition;

You can see the result like below if use the source code above.

react-native-geolocation-service user current location

How to track user geolocation

We can not only get user current location, but also track user geolocation by react-native-geolocation-service.

The source code below is about how to track user gelocation.

_watchId = Geolocation.watchPosition(
  position => {
    const {latitude, longitude} = position.coords;
    setLocation({latitude, longitude});
  },
  error => {
    console.log(error);
  },
  {
    enableHighAccuracy: true,
    distanceFilter: 0,
    interval: 5000,
    fastestInterval: 2000,
  },
);

After tracking, we can stop it by the code below.

if (_watchId !== null) {
  Geolocation.clearWatch(_watchId);
}

The example below is the full source code about how to track user geolocation.

import React, {useState, useEffect} from 'react';
import Styled from 'styled-components/native';
import Geolocation from 'react-native-geolocation-service';

const Container = Styled.View`
    flex: 1;
    justify-content: center;
    align-items: center;
`;

const Label = Styled.Text`
    font-size: 24px;
`;

interface ILocation {
  latitude: number;
  longitude: number;
}

const WatchLocation = () => {
  const [location, setLocation] = useState<ILocation | undefined>(undefined);

  useEffect(() => {
    const _watchId = Geolocation.watchPosition(
      position => {
        const {latitude, longitude} = position.coords;
        setLocation({latitude, longitude});
      },
      error => {
        console.log(error);
      },
      {
        enableHighAccuracy: true,
        distanceFilter: 0,
        interval: 5000,
        fastestInterval: 2000,
      },
    );

    return () => {
      if (_watchId) {
        Geolocation.clearWatch(_watchId);
      }
    };
  }, []);

  return (
    <Container>
      {location ? (
        <>
          <Label>Latitude: {location.latitude}</Label>
          <Label>Latitude: {location.longitude}</Label>
        </>
      ) : (
        <Label>Loading...</Label>
      )}
    </Container>
  );
};

export default WatchLocation;

You can use the simulator for testing to track user location information. Open Debug > Location menu and choose one of City Run, City Bicycle Ride, Freeway Drive menu like the screen below. You can see the location changed.

react-native-geolocation-service tracking user location

Completed

We’ve seen how to get user location information by react-native-geolocation-service. Also, we’ve seen how to track user geolocation by watchPosition.

Was my blog helpful? Please leave a comment at the bottom. it will be a great help to me!

Posts