Prashant Gond
  27 Nov 19

In this post, we will learn, How to implement Geolocation in your App?

Geolocation will find your current location and Geocoding gives your address (like City Name, Street Name, etc) by Coordinates (Latitude and Longitude).

What is Geolocation?

The most famous and familiar location feature — Geolocation is the ability to track a device using GPS, cell phone towers, WiFi access points or a combination of these. Since devices area unit employed by people, geolocation uses positioning systems to trace associate degree individual’s whereabouts right down to latitude and great circle coordinates, or more practically, a physical address. Both mobile and desktop devices can use geolocation.

Geolocation is accustomed to confirm zone and actual positioning coordinates, like for chase life or shipment shipments.

What is Geocoding and Reverse geocoding?

Geocoding is the method of remodeling an address or alternative description of a location into a (latitude, longitude) coordinate.

Reverse geocoding is the method of remodeling a (latitude, longitude) coordinate into a (partial) address. The amount of detail in a very reverse geocoded location description might vary, as an example, one would possibly contain the complete address of the closest building, whereas another would possibly contain only a city name and postal code.

Post structure

We will go in a step-by-step manner to explore the Geolocation.

STEPS

• Create a simple React Native app
• Install Plugins for Geocoding and Geolocation and get User Location
• Get User Current Location (Geocoding)
• Convert User Geolocation into an address (Reverse Geocoding)

We have three major objectives

• Get User Current Location that we’ll get in latitude and longitude (Geolocation)
• Convert that latitude and longitude in Street Address (Reverse Geocoding)
• Install Plugins for Geocoding and Geolocation and get User Location

Step 1: – Create a simple React Native app

If you’re aware of native development, you’ll doubtless need to use React Native user interface.
It needs Xcode or Android Studio to get started.
If you have already got one of these tools installed, you should be able to get up and running within some minutes.
If they’re not installed, you should expect to spend about an hour installing and configuring them.

React Native CLI Quickstart

Assuming that you just have Node 10+ installed, you’ll be able to use npm to install the React Native cli command-line utility:

npm install -g react-native-cli

Then run the following commands to create a new React Native project known as  “AwesomeProject”:

react-native init AwesomeProject

For details, you can check this link.

Step2 :- react-native-geolocation-service

This library is created in an attempt to fix the location timeout issue on android with the react-native current implementation of Geolocation API. This library tries to solve the issue by using Google Play Service’s new FusedLocationProviderClient API, which Google strongly recommends over android’s default framework location API. Which provider to use based on your request configuration, It automatically decides and also prompts you to change the location mode if it doesn’t satisfy your current request configuration.

NOTE: Location requests can still timeout since many android devices have GPS issues on the hardware level or in the system software level.

Installation:

yarn add react-native-geolocation-service

npm install react-native-geolocation-service

Setup:

Android:

No additional setup is required for Android.

iOS:

Enable geolocation in the background, you will include the NSLocationAlwaysUsageDescription key in Info.plist and add location as a background mode in the ‘Capabilities’ tab in Xcode.

Update your Podfile

pod ‘react-native-geolocation’, path: ‘../node_modules/@react-native-community/geolocation’

Then run pod install from ios directory

Error Codes

Step 3:-Get User Current Location (Geocoding)

Since this library was meant to be a drop-in replacement for the RN’s Geolocation API, the usage is pretty uncomplicated, with some further error cases to handle.

One issue to notice, this library assumes that location permission is already granted by the user, thus you have got to use PermissionsAndroid to request for permission before creating the placement request.

import Geolocation from ‘react-native-geolocation-service’;

And add this function into your code

if (hasLocationPermission) {
Geolocation.getCurrentPosition(
(position) => {
console.log(position);
},
(error) => {
// See error code charts below.
console.log(error.code, error.message);
},
{ enableHighAccuracy: true, timeout: 10000, maximumAge:10000 }
);
}

So after adding all this code your file something look like this.

    componentDidMount() {
        Geolocation.getCurrentPosition(
            (position) => {
                console.log(position);
            },
            (error) => {
                // See error code charts below.
                console.log(error.code, error.message);
            },
            { enableHighAccuracy: false, timeout: 10000, maximumAge: 100000 }
        );
    }

Step 4:- User Geolocation into an address (Reverse Geocoding)

We used a react-native-geocoding package for Geocoding and Reverse Geocoding.
A geocoding module in React native to get a location description (Street Address, City Name, etc) via coordinates(Latitude and longitude).

This module uses the Google Maps Geocoding API and requires an API key for purposes of quota management. Please check this link to obtain your API key.

Install

npm install –save react-native-geocoding

You can just  import Geocoder API from a react-native-geocoding package in your App.

import Geocoder from ‘react-native-geocoding’;

And then you have to initialize the module in your app

Geocoder.init(“xxxxxxxxxxxxxxxx“); // use a valid API key

// With more options

// Geocoder.init(“xxxxxxxxxxxxxxxxxxx”, {language : “en”}); // set the language

And use also this code for Geocoding and reverse Geocoding:

Geocoder.from(41.89, 12.49)
.then(json => {
var addressComponent = json.results[0].address_components[0];
console.log(addressComponent);
})
.catch(error =>
       console.warn(error)
);

A working example of Geolocation and GeoCoding to React-Native Apps.

import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Geocoder from 'react-native-geocoding';
import Geolocation from 'react-native-geolocation-service';

export default class LocationDemo extends Component {

    constructor() {
        super()
        this.state = {
            latitude: 0,
            longitude: 0,
            error: null,
            Address: null
        }
    }

    async componentDidMount() {
        Geolocation.getCurrentPosition(
            (position) => {
                this.setState({
                    latitude: position.coords.latitude,
                    longitude: position.coords.longitude,
                });
                Geocoder.from(position.coords.latitude, position.coords.longitude)
                    .then(json => {
                        console.log(json);
                        var addressComponent = json.results[0].address_components;
                        this.setState({
                            Address: addressComponent
                        })
                        console.log(addressComponent);
                    })
                    .catch(error => console.warn(error));
            },
            (error) => {
                // See error code charts below.
                 this.setState({ error: error.message }),
                   console.log(error.code, error.message);
             },
            { enableHighAccuracy: false, timeout: 10000, maximumAge: 100000 }
        );
    }

    render() {
        return (
            <View style={styles.MainContainer}>
                <Text style={styles.text}> Latitude = {this.state.latitude}</Text>
                <Text style={styles.text}> Longitude = {this.state.longitude}</Text>
                <Text style={styles.text}>{this.state.Address}</Text>
                {this.state.error ? <Text>Error: {this.state.error}</Text> : null}
            </View>
        );
    }
}

const styles = StyleSheet.create({
    MainContainer: {
        flex: 1,
        justifyContent: 'center',
        backgroundColor: '#f5fcff',
        padding: 11
    },
    text: {
        fontSize: 22,
        color: '#000',
        textAlign: 'center',
        marginBottom: 10
    },
});

Conclusion

In this blog, we learned how to implement the Geolocation React Native app. We also learned how to Convert Geocode in the Location address in a simple React Native app.

InnovationM is a globally renowned Mobile app development company in Noida that caters to a strong & secure Android app development, iOS app development, hybrid app development services. Our commitment & engagement towards our target gives us brighter in the world of technology and has led us to establish success stories consecutively which makes us the best Android app development company in Noida.

Thanks for giving your valuable time. Keep reading and keep learning.