Expo GPS location guide

Today, Ill introduce to you a simple and fast method to get your full GPS location, poll for the current location or subscribe to location update events.

Expo-location is such a great and simple method to handle GPS location demand for all types of environment IOS, Android, Web. This method is likely to benefit developers who work on Timekeeping, check in, check out apps, …

Here is how to do it base on my experiment:

Step 1: Install and import needed elements and functions.

Start to install expo-location on your terminal. You can get the command here:

expo install expo-location

This command is used on Expo environment only in other cases you should use it base on your type such as:

npm i expo-location or yarn i expo-location

To import this method use this command:

import * as Location from 'expo-location';

Step 2: Configuration

For Android :

  • This module requires the permissions for approximate and exact device location. It also needs the foreground service permission to subscribe to location updates, while the app is in use. —-
  • The android.permission.ACCESS_COARSE_LOCATIONACCESS_FINE_LOCATION, and FOREGROUND_SERVICE permissions are automatically added.

In order to use background location features, you also must add the android.permission.ACCESS_BACKGROUND_LOCATION and submit your app for review and request access to use the background location permission.

Permission asking code is looks like this:

import React, { useState, useEffect } from 'react';
import { Platform, Text, View, StyleSheet } from 'react-native';
import * as Location from 'expo-location';

export default function App() {
  const [location, setLocation] = useState(null);
  const [errorMsg, setErrorMsg] = useState(null);

  useEffect(() => {
    (async () => {
      let { status } = await Location.requestForegroundPermissionsAsync();
      if (status !== 'granted') {
        setErrorMsg('Permission to access location was denied');
        return;
      }

      let location = await Location.getCurrentPositionAsync({});
      setLocation(location);
    })();
  }, []);

  let text = 'Waiting..';
  if (errorMsg) {
    text = errorMsg;
  } else if (location) {
    text = JSON.stringify(location);
  }

  return (
    <View style={styles.container}>
      <Text style={styles.paragraph}>{text}</Text>
    </View>
  );
}

For others you should read more in here, but in some cases there is no need to have this config on your app.

Step 3: Usage and Utilities

If you’re using the iOS or Android Emulators, ensure that Location enabled.

Example code for this:

const getGpsLocation = async () => {
    return new Promise(async (resolve) => {
      let location = await Location.getCurrentPositionAsync({
        accuracy: Location.Accuracy.Balanced,
      });

      return resolve(true);
    });
  };

Here is some utilities for this method:

const getDistanceCalculation = () => {
    return new Promise(async (resolve) => {
      var dis = getDistance(
        { latitude: 10.787958166366703, longitude: 106.6782129961472 },
        { latitude: latitude, longitude: longitude }
      );
      return resolve(true);
    });
  };

The code paragraph above is for distance between two directions calculation.

For example you want to calculate the distance between your office to your current position, then this is exactly what you need!

Step 4: Enabling Emulator Location

Or in other words, this step is showing how to use this method on your emulator Android App Studio and Ios Emulator.

For IOS do like this:

With Simulator open, go to Debug > Location and choose any option besides “None” (obviously).

For Android App Studio:

Open Android Studio, and launch your AVD in the emulator. Then, on the options bar for your device, click the icon for “More” and navigate to the “Location” tab.

Note: If you don’t receive the locations in the emulator, you may have to turn off “Improve Location Accuracy” in Settings – Location in the emulator. This will turn off Wi-Fi location and only use GPS. Then you can manipulate the location with GPS data through the emulator.

Hope you like this, enjoy coding!

Leave a Comment

Your email address will not be published. Required fields are marked *