How to use React Native Geolocation Service?

React Native Geolocation Service

How to use React Native Geolocation Service?

You may have questioned how ride-hailing and food delivery services determine your current location. Ever come across the term Geolocation?

We’ll learn how to use geolocation in React Native in this tutorial. We’ll create an example application that allows the user to submit their position to another source, such as Twitter, and shows their location on a map with longitude and latitude data.

What is geolocation?

The ability to determine a device’s geographic location to the internet is known as geolocation. Using a device’s IP address to find its location in terms of nation, city, or postal code is a basic example of geolocation. Most of the time, an app cannot access a user’s location data without the user’s consent.

Geolocation in React Native

The @react-native-community/geolocation API for geolocation is made available by React Native. However, because the React Native API is slower and less precise than the suggested Google Location Services API, Google does not advise using it for geolocation.

React Native geolocation services can now be easily implemented in React Native thanks to the wonderful libraries created by the React Native community, such as react-native-location and react-native-geolocation-service.

We’ll be using the react-native-geolocation-service library in this React Native geolocation tutorial; it’s accessible as a Node package on npm.

Our program will be able to perform the following tasks:

  • Requests authorization to access location information on your iOS and Android smartphone.
  • Select the coordinates of your location.
  • Retains or transmits your position data

Execute the following code to find out your Node.js version:

$ node -v

// returns node version

Multiple Node.js versions installed on your computer may be managed with nvm. You may create a new project using the integrated command line interface of React Native app development framework. It may be accessed with npx, which comes with Node.js, without requiring any global installations.

Initialize a React Native project

Enter the following command into your terminal to get started:

$ npx ReactNativeGeolocation init React Native app development. 

You may execute Node-based dependencies in your terminal without installing them on your computer by using the Node-based command npx.

The directive to create a new React Native project using ReactNativeLocation as the location where the project files will be installed is contained in the init portion of the command.

It is not necessary to install React Native development services on your computer in order to use the npx react-native command. As an alternative, you may use npx to execute React Native instructions by installing React Native globally on your computer. Use this command to install React Native globally:

$ npm install -g react-native-cli

Next, you can use the following command to verify that React Native is installed:

$react-native -v

The aforementioned program outputs to the console the installed version of React Native on your system. Navigate to the ReactNativeGeolocation directory using your preferred IDE. 

The React Native app has been configured for us by the command we performed to begin the project.

All of our code will be written in the App.js file. To execute the instructions, make sure you are in your application’s root directory.

Launching Metro is the first step. React Native comes with a JavaScript bundler called Metro. Metro generates a single JavaScript file with all of your code and its dependencies after receiving an entry file and several options:

$ npx react-native start

Open a new terminal and type the following command while Metro is running in your current terminal:

$npx run-android react-native

You’ll need an Android emulator or a mobile device in debug mode connected to your PC to launch the app. However, the following causes might cause an error if you’re using the emulator in Android Studio:

An ANDROID_HOME environment variable that links to the SDK directory must be defined.

You must accept every SDK license.

The screen that appears next should be as follows:

We are now able to modify the application within our App.js folder. Take out all of the outdated code from App.js and replace it with this:

The code above opens a new window for us to write our application on:

React Native requirements needed for geolocation

Using Yarn or npm, install the react-native-geolocation-service library using the corresponding commands below:

React-native-geolocation-service is added with yarn.

React-native-geolocation-service –save may be installed with npm.

Previously, linking the library was required; however, in more recent iterations of React Native app development services, this process is automated when executing a build using npx react-native run-android, or its iOS counterpart.

 These connecting instructions should assist you in setting up React Native ≤v0.60.

In addition, we want to confirm that we include the following code to android/src/main/AndroidManifest.xml to allow permissions in the application:

Android:name=”android.permission.INTERNET” />

Run npx react-native run-android once more after that.

React Native application geolocation integration

Let’s add two buttons to our React Native app: one to communicate the user’s location to Twitter and another to get the user’s location, which we’ll keep in the app state.

Update the React Native imports to include Button, for example, import {StyleSheet, View, Text, Button} from’react-native’;

You may try this unified iOS/Android permissions library or read articles on iOS permission flow for information on iOS app permissions.

To ask the issuer for authorization, we call the request function in the code above. 

Next, we supply an object containing the prompt’s information. We return true if the request was successful and false otherwise.

Obtaining the user’s location information

We will now establish a state to monitor our users’ whereabouts from within our component.

Next, we’ll create a function that will ask for permission when the GET LOCATION button is touched. If authorization is given, the user’s current location will be obtained:

We observe ourselves calling the previously written requestLocationPermission function, which returns a promise that can resolve to yes or false. We use the react-native-geolocation-service library to obtain the precise position and set the location state to the result if the promise resolves to true. It will set the location state to false if the promise is false, indicating that authorization was not granted, or if it is unable to obtain the location.

Next, we add the getLocation method to the GET LOCATION button as an onPress event:

As of right now, your App.js code ought to resemble this:

When it launches and you select the GET LOCATION button, the following pop-up window will appear:

After that, the screen ought to display your location as seen below:

The Location Entity

React-native-geolocation-service will provide a location object that resembles the following code:

Geolocation data transmission in React Native

We only need to change the communicate LOCATION button into a Tweet button to communicate the user’s geolocation data to Twitter.

We’ll show the data returned in the example before sending the user the location. Add the useState Hook from React to our project in the following way to do this:

Then, under our App function, we define a state:

We call the isViewLocation function and update the viewLocation array with the location information object by updating the if expression as follows:


Update the Location and Longitude text tags to see the information returned:

viewLocation.The function isViewLocation calls the object response, and latitude returns the latitude in that response. For the longitude, the same holds.

We may now update the button to notify Twitter of the user’s location. Below is a screenshot of our last sample application:

Send User Location Data to Twitter

Next, ask your mobile app development company to configure and include the user’s location in a new Tweet using the SEND LOCATION button:

The aforementioned function

  • Determines if our location is in our state. 
  • Location will equal false if we don’t.
  • Creates a string containing our latitude and longitude to serve as our tweet.
  • Builds a URL to generate the tweet.
  • Opens the URL by using the Linking object. 
  • Link & Import from React Native

You should now see a browser window that resembles the following image when you click the SEND LOCATION button:

The following code should be present in the final App.js file:


There’s much more you can do with the location of a user now that you know how to get it. You may create an emergency button alert system, track a user, and even create a delivery service. There are countless options. We just touched the surface of the react-native-geolocation-service library in this tutorial, which we used to create our sample application.

If you’re looking for a user-friendly solution that provides precise location data on a website instead of a mobile app then you can explore for seamless location viewing in a browser.

The characteristics of geolocation are intriguing and have many practical applications. If you intend to utilize geolocation in your React Native project, let us know in the comments. Have fun with coding!

Hire DianApps app developers to use the geolocation service in your business so that people can find you in a better and more efficient way. 


Leave a Reply

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