Get the Current Location of the Device Using React Native Geolocation

This post will help you to Get the Current Location of the Device 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 Geolocation

This example will work with the projects made with react-native init or with the ejected Expo CLI projectIf you are using Expo CLI then you must have to eject from the expo environment so that you will have Android and IOS native dependencies in your project. 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 Run the following commands to create a new React Native project This will make a project structure with an index file named App.js in your project directory.

Add Permissions to Get Device Location

Before you go to the code you need to put some efforts to add some permission request to access the location of the device. For this on IOS the necessary key in the Info.plist (NSLocationWhenInUseUsageDescription) 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.

On Android it’s similarly simple, just not enabled by default. In your AndroidManifest.xml you’ll need to add the following permission request

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. To run the project on an Android Virtual Device or on real debugging device or on the iOS Simulator by running

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

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!

About Snehal Agrawal

#SelfLearner #MobileAppDeveloper #TechnologyMiner #OpenSourceLover thats enough to describe me..

View all posts by Snehal Agrawal →

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.