Current Location Latitude and Longitude Using React Native Geolocation

Current Location Latitude and Longitude Using React Native Geolocation

This post will help you to Get the Current Location Latitude and Longitude Using React Native Geolocation. React Native Geolocation includes how to use React Native Geolocation API in React Native Application. Geolocation API is used to get your current geolocation of the device.

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

To Get Current Location Latitude and Longitude

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

Run the following command to install

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

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

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.

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

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).

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.

This is how you can Get the Current Location of the Device Using React Native Geolocation. If you have any doubt 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. 🙂

Leave a Comment

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

For Query / Bug / Problem / Issues we have introduced query trackerKnow More
+