The advent of trending technology has brought a surge in the use of Geolocation features in their app. From day-to-day GPS tracking to its use in the logistics and supply chain department, Geolocation features have become a blessing for regular as well as corporate users.

Incorporating such a feature in an app may seem to be difficult and complex but with the formula of the less coding algorithm, react native app development company have been successful in accomplishing the task in much less time.

Let us see how you can build a geolocation feature in a React Native app.

What is the pre-acquired knowledge required?

First of all, you have to get your system compatible with the React Native environment. And what you can do for this compatibility is to install software like Node.js, a Virtual device or emulator, React Native CLI, and others. We won’t be discussing the process of setting up the React Native environment.  We have a separate blog for this. So check this article and get the entire setup done.

Secondly, for the current project, you need an app or a react native app.  Since we are focusing on the React Native framework, you will need a React Native app precisely where you can embed these features. If you are not confident about the app-building process

Note that we will be using the React Native CLI tool for the project. So while checking the above-mentioned article, you can avoid the sections under Expo CLI.  

What is a Third-party React Native package? 

The third-party React Native package is a form of a library that developers can install independently and use in their projects. Precisely, you can import relevant components from these third-party libraries and make your codebase much shorter. 

React Native developers have been completely relying on the framework, particularly for its third-party plugin support. 

Considered third-party plugin:  @react-native-community/geolocation

This is the third-party package that you need to install in your system to get 50% of the task done.  You will be using the Geolocation component from this package.  Later in the code explanation segment, I will discuss how you can use and import the Geolocation component. 

To install the package, you have to pass the command npm install @react-native-community/geolocation –save in a  command prompt. 

Now let us dig into the coding part. 

Insight into the  codebase

Import relevant  components 

Use the below-given syntax.

import {StyleSheet, Text, View} from ‘react-native’;;

import React, {useState} from ‘react’;;

import Geolocation from ‘@react-native-community/geolocation’;

 Here, you must import the React Native components you will need to structure the app. Also, you can import a  component from a particular package. For example, if you want to use StyleSheet, Text, and View. You have to write import {StyleSheet, Text, View} from ‘react-native’; You are importing all these three components from ‘react-native’. Similarly, repeat the process for other components.

The most important component is the Geolocation that you need to import from the independent third-party React Native package @react-native-community/geolocation.

Introducing global object

With the syntax: navigator.geolocation = require(‘@react-native-community/geolocation’); you can find the exact device location. It is the global variable. 

Using the useState hook

Firstly, introduce a component App under which you need to use the useState hook. 

Consider the below-given code syntax.

  const [location, setLocation] = useState();;

useState is used to set the initial value of the variable location. This way you can store the information collected from the defined geolocation API. On the contrary, you have to use setLocation()  to make any update in the latitude and longitude of the new location. 

Using console.log() to log latitude and longitude 

To get  the latitude and longitude of the current location, you have to use the syntax

Geolocation.getCurrentPosition(

    position => {

      const initialPosition = position;

Here, the variable initialPosition is for storing the value of the location. You can add properties on the initialPosition later. Properties will be in terms of latitude and longitude. 

Now to log the value of latitude, use the below-provided syntax.

console.log(initialPosition.coords.latitude);

 

      setLocation(initialPosition.coords);

    },

Also, initialPosition.coords, an object holds two properties namely longitude and latitude. 

Rendering error message 

This will be required if the user is not willing to share their location.  For this use the following syntax.

error => Alert.alert(‘Error’, JSON.stringify(error)),

Adding styling elements to View and Text components

 return (

    <View style={styles.container}>

 <Text style={styles.textLocation}>Geolocation</Text>

 <View style={styles.box}>

What I am doing is rendering a box for the display of the latitude and longitude; the entire container or the screen and a  text element ‘Geolocation’. You will see the application of this styling element later in the codebase.

Applying && operator in  place of if/else statement

The logical operator or ternary operator or && is used to cross-check the location. Firstly you use latitude:-{location && location.latitude} to check whether the latitude is correctly showing. If yes, then move forward displaying the longitude. In case, the value of the location is not correct, the code will log an undefined value.  Refer to the following syntax for the explanation.

        <Text style={styles.text}>

 

          latitude:-{location && location.latitude}

        </Text>

        <Text style={styles.text}>

          longitude:-{location && location.longitude}

Designing box, text, container, and text location using StyleSheet

const styles = StyleSheet.create({

  container: {

    flex: 1,

    backgroundColor: ‘orange’,

  },

  textLocation: {

    fontSize: 30,

    marginHorizontal: 100,

    marginTop: 300,

  },

  box: {

    width: 300,

    height: 80,

    backgroundColor: ‘white’,

    alignSelf: ‘center’,

    marginTop: 20,

    shadowColor: ‘#171717’,

    shadowOffset: {width: -2, height: 4},

    shadowOpacity: 0.2,

    shadowRadius: 3,

    elevation: 20,

},

  text: {

    color: ‘#000000’,

    fontSize: 15,

    marginHorizontal: 20,

  },

})

 These are the segregation that you have to make independently for all four objects (text, Container, box, and textLocation).  

However, start with the syntax: const styles = StyleSheet.create({…})

 Now that you are done with the coding part, let us get into the last step.

To  run the  emulator and test the app

It is a two-step process where you have to run two commands: npm install and npx react-native run-android. It has to be one after the other.  As soon as your terminal shows the message ‘BUILD SUCCESSFUL’, your emulator will start running.  

Also, note that, before starting the app, you need to grant permission for the device’s current location. 

Finally, the app on the emulator will run. Refer to the below-given image for the output. 

If you have followed the entire process, you have surely realized how easier it is to use the React Native framework, and its third-party libraries and integrate different features in an app.