React Native Geolocation – To Get the Current Location in React Native

React Native Geolocation

This post will help you to get the current location using React Native Geolocation. React Native Geolocation provide the current location of device in the form of Latitude, Longitude.

Let’s see how to use React Native Geolocation API to get the current location of any device/user. We will see how to import geolocation dependency, how to ask for the permission to access the geolocation and then code to get the geolocation in React Native.

Note: This example has been updated for React Native Version > 0.60 in which Geolocation has been moved to its new house @react-native-community/geolocation. So in this example, we will import that library to use Geolocation.

Code Snippet to use React Native GeoLocation

Geolocation.getCurrentPosition(
   //Will give you the current location
   (position) => {
       const currentLongitude = JSON.stringify(position.coords.longitude);
       //getting the Longitude from the location json
       const currentLatitude = JSON.stringify(position.coords.latitude);
       //getting the Latitude from the location json
   },
   (error) => alert(error.message),
   { 
      enableHighAccuracy: true, timeout: 20000, maximumAge: 1000 
   }
);

This example will get the Current Location Latitude and Longitude of the Device. This example will also show you how to ask for permission to get the current location. So let’s get started.

To Make a React Native App

Getting started with React Native will help you to know more about the way you can make a React Native project. We are going to use react-native init to make our React Native App. Assuming that you have node installed, you can use npm to install the react-native-cli command line utility. Open the terminal and go to the workspace and run

npm install -g react-native-cli

Run the following commands to create a new React Native project

react-native init ProjectName

If you want to start a new project with a specific React Native version, you can use the --version argument:

react-native init ProjectName --version X.XX.X
react-native init ProjectName --version react-native@next

This will make a project structure with an index file named App.js in your project directory.

Installation of Dependency

To use Geolocation we need to install @react-native-community/geolocation dependency.

To install this open the terminal and jump into your project using

cd ProjectName

Run the following command to install

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

This command will copy all the dependency into your node_module directory.

CocoaPods Installation

After the updation of React Native 0.60, they have introduced autolinking so we do not require to link the library but need to install pods. So to install pods use

cd ios && pod install && cd ..

Permission to use the Geolocation for Android

We are using a Native Location API so we need to add some permission to the AndroidManifest.xml file. We are going to add the following permissions in the AndroidMnifest.xml

<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
PermissionPurpose
ACCESS_FINE_LOCATIONTo access the Location Via GPS

On devices before SDK version 23, the permissions are automatically granted if they appear in the manifest but after SDK version 23 we have to ask run time permission also, so we will ask for permission in code also. For more about the permission, you can see this post.

Permission to use the Geolocation for IOS

In IOS the necessary key in the Info.plist (Privacy – Location When in Use Usage Description) is already set when you create a new app. If you want to use a user’s location when the app is in the background you’ll have to do some additional configuration. You can find more details about different location permission from here. For now, there are three types of location permission and they are listed below.

If you have an idea about the permission then you can check it else please follow the instruction to add the permission in IOS. As we said you will find the already set location permission in IOS.

1. Open the project GeoLocationExample>ios>GeoLocationExample.xcodeproj in XCode. Click on Project (GeoLocationExample in my case) from the left sidebar and you will see multiple options in the workspace.

2. Select info tab which is info.plist. You can see “Privacy – Location When in Use Usage Description” is already there.

3. Add the value in front of that which will be visible when permission dialog pops up.

Code

Now Open App.js in any code editor and replace the code with the following code

App.js

//This is an example code to get Geolocation//  
import React from 'react';
//import react in our code. 
import {View, Text,  StyleSheet, Image ,PermissionsAndroid,Platform} from 'react-native';
//import all the components we are going to use.
import Geolocation from '@react-native-community/geolocation';


export default class App extends React.Component {
  state = {
    currentLongitude: 'unknown',//Initial Longitude
    currentLatitude: 'unknown',//Initial Latitude
 }
 componentDidMount = () => {
  var that =this;
  //Checking for the permission just after component loaded
  if(Platform.OS === 'ios'){
    this.callLocation(that);
  }else{
    async function requestLocationPermission() {
      try {
        const granted = await PermissionsAndroid.request(
          PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,{
            'title': 'Location Access Required',
            'message': 'This App needs to Access your location'
          }
        )
        if (granted === PermissionsAndroid.RESULTS.GRANTED) {
          //To Check, If Permission is granted
          that.callLocation(that);
        } else {
          alert("Permission Denied");
        }
      } catch (err) {
        alert("err",err);
        console.warn(err)
      }
    }
    requestLocationPermission();
  }    
 }
 callLocation(that){
  //alert("callLocation Called");
    Geolocation.getCurrentPosition(
      //Will give you the current location
       (position) => {
          const currentLongitude = JSON.stringify(position.coords.longitude);
          //getting the Longitude from the location json
          const currentLatitude = JSON.stringify(position.coords.latitude);
          //getting the Latitude from the location json
          that.setState({ currentLongitude:currentLongitude });
          //Setting state Longitude to re re-render the Longitude Text
          that.setState({ currentLatitude:currentLatitude });
          //Setting state Latitude to re re-render the Longitude Text
       },
       (error) => alert(error.message),
       { enableHighAccuracy: true, timeout: 20000, maximumAge: 1000 }
    );
    that.watchID = Geolocation.watchPosition((position) => {
      //Will give you the location on location change
        console.log(position);
        const currentLongitude = JSON.stringify(position.coords.longitude);
        //getting the Longitude from the location json
        const currentLatitude = JSON.stringify(position.coords.latitude);
        //getting the Latitude from the location json
       that.setState({ currentLongitude:currentLongitude });
       //Setting state Longitude to re re-render the Longitude Text
       that.setState({ currentLatitude:currentLatitude });
       //Setting state Latitude to re re-render the Longitude Text
    });
 }
 componentWillUnmount = () => {
    Geolocation.clearWatch(this.watchID);
 }
 render() {
    return (
       <View style = {styles.container}>
          <Image
            source={{uri:'https://png.icons8.com/dusk/100/000000/compass.png'}}
            style={{width: 100, height: 100}}
          />
          <Text style = {styles.boldText}>
             You are Here
          </Text>
          <Text style={{justifyContent:'center',alignItems: 'center',marginTop:16}}>
            Longitude: {this.state.currentLongitude}
          </Text>
          <Text style={{justifyContent:'center',alignItems: 'center',marginTop:16}}>
            Latitude: {this.state.currentLatitude}
          </Text>
       </View>
    )
 }
}
const styles = StyleSheet.create ({
 container: {
    flex: 1,
    alignItems: 'center',
    justifyContent:'center',
    marginTop: 50,
    padding:16,
    backgroundColor:'white'
 },
 boldText: {
    fontSize: 30,
    color: 'red',
 }
})

To Run the React Native App

Open the terminal again and jump into your project using.
cd ProjectName
To run the project on an Android Virtual Device or on real debugging device
react-native run-android
or on the iOS Simulator by running
react-native run-ios (macOS only).

Output Screenshots

Android

      

If you are using Android Emulator to run the app. You have to send the GPS location manually from the menu button (3 dots)

IOS

   
If you are using IOS Simulator then send GPS location Manually like below screenshot.

Output in Online Emulator

This is how you can Get the Current Location of the Device Using React Native Geolocation. If you have any doubts or you want to share something about the topic you can comment below or contact us here. There will be more posts coming soon. Stay tuned!

Hope you liked it. 🙂


Related Posts

5 thoughts on “React Native Geolocation – To Get the Current Location in React Native”

  1. when i give permission its not enable device location button. and i manually enabled the location button but the state is not updating automatically its not showing latitude and longitude

    Reply
    • Hi Vinayak, Yes it will not enable the location automatically, permission is to take the GPS location not to enable it. Have you tried it out of the working area? I have also not received the location in my room and I have to move out as GPS will not connect under the roof.

      Reply
    • With the help of getCurrentPosition you will get the current position and with the help of watchPosition you will get the updated position every time when it changes. So watchPosition will work as a listener to notify the location change.

      Reply

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.