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 Geolocation API in React Native Application. Geolocation API is used to get your current geolocation.

As a browser polyfill, this API is available through the navigator.geolocation global – you do not need to import it.

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
This will make a project structure with an index file named App.js in your project directory.

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

How useful was this post?

Click on a star to rate us!

Average rating / 5. Vote count:

As you found this post useful...

Follow us on social media!

We are sorry that this post was not useful for you!

Let us improve this post!

0 replies

Leave a Reply

Want to join the discussion?   Feel free to contribute!

Leave a Reply

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

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