React-Native Geolocation

Syntax

The react-native library provides a Geolocation module that allows apps to access the device's GPS location.

import { Geolocation } from 'react-native';

Geolocation.getCurrentPosition(
  position => {
    const latitude = position.coords.latitude;
    const longitude = position.coords.longitude;
    // do something with latitude and longitude
  },
  error => console.log(error.message)
);

Example

import { Geolocation } from 'react-native';
import React, { useEffect, useState } from 'react';
import { Text } from 'react-native';

function GeoLocation() {
  const [location, setLocation] = useState(null);

  useEffect(() => {
    Geolocation.getCurrentPosition(
      position => {
        setLocation(position.coords);
      },
      error => console.log(error.message)
    );
  }, []);

  return location ? (
    <Text>
      My current location is {location.latitude}, {location.longitude}
    </Text>
  ) : (
    <Text>Loading...</Text>
  );
}

export default GeoLocation;

Output

The above code will output the current latitude and longitude of the user's device in the Text component. If there is an error, it will be displayed in the console.

Explanation

React-Native Geolocation provides a simple way to access the device's current position. getCurrentPosition() method takes two arguments - a function to be called when the coordinates are successfully retrieved, and a function to be called in case of an error.

The above example uses the useState hook to store the coordinates in state, and the useEffect hook to trigger the getCurrentPosition() method when the component mounts.

Use

React-Native Geolocation can be used to get the current location of the device, or to get continuous updates of the device's location.

The Geolocation module exposes the following methods:

• getCurrentPosition(success callback, error callback, options): Gets the device's current position, or recent position if available.
• watchPosition(success callback, error callback, options): Subscribes to location updates and executes a callback function with the updated location.
• clearWatch(watchID): Unsubscribes from location updates.

Important Points

• Location permissions must be granted by the user for the Geolocation module to work.
• The accuracy of the location information retrieved can depend on a number of factors, such as network connectivity, available GPS satellites, and the location of nearby Wi-Fi networks.

Summary

React-Native Geolocation is a powerful tool for accessing the device's location information. Functions such as getCurrentPosition() and watchPosition() allow apps to retrieve the user's current location or continuously monitor their location. With the proper permissions and awareness of location accuracy, React-Native Geolocation can be used in a variety of apps to provide useful location-based features.