React Native Geolocation – GPS – GIS Mobile App

Geolocation in React Native is the identification or estimation of the real-world geographic location of a mobile phone .

In this post, we will  discuss  how to find Geolocation of mobile phone in react native with one example, but before going to detail of this post I  suggest you to read the official documentation.

React Native Geolocation

React Native Geolocation – GPS – GIS Mobile App

Installation

iOS : installation for ios

Android:

Our App will request  access to location, for this we need to add following line of code in our App’s AndroidManifest.xml which is located at  android/app/src/main/AndroidManifest.xml in our App.

<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

API Overview

The geolocation api exists on the global navigator object in React Native,  so we would access it via navigator.geolocation.

I will be covering only one method available  on   navigator.geolocation

getCurrentPosition

The getCurrentPosition   method allows us to request a user’s location at any time. This method take three parameter as follow:

geolocation.getCurrentPosition(geo_success, [geo_error], [geo_options]);

parameters of method :

geo_success - a success callback
[geo_error] -an error callback
[geo_options]-a configuration object

The success callback will be passed an object that looks like :

{
    "timestamp": 1484669056399.49,
     "coords": {
           "accuracy": 5,
           "altitude": 0,
           "altitudeAccuracy": -1,
           "heading": -1,
           "latitude": 37.785834,
          "longitude": -122.406417,
          "speed": -1
     }
}

The error callback will be passed a standard error message.

The config object has

  • enableHighAccuracy (boolean)— which allows you to get the most accurate location.
  • timeout (milliseconds)— how long does the API have to return the position before throwing an error?
  • maximumAge (milliseconds) — if a location exists in the device cache, how old can it be before it’s no longer valuable to your app?

Example

Here we are discussing one example in which we will try to find out the current position of mobile( latitude,longitude).In our project there are two file:

  1. index.js
  2. App.js
index.js
import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => App);
App.js
import React, { Component } from 'react';
import { View } from 'react-native';
import { Container, Header, Content, Card, CardItem, Body, Text } from 'native-base';

class App extends Component {
constructor(props) {
super(props);

this.state = {
latitude: null,
longitude: null,
error: null,
};
}

componentDidMount() {
navigator.geolocation.getCurrentPosition(
(position) => {
this.setState({
latitude: position.coords.latitude,
longitude: position.coords.longitude,
error: null,
});
},
(error) => this.setState({ error: error.message }),
{ enableHighAccuracy: true, timeout: 20000, maximumAge: 1000 },
);
}

render() {
return (
<Container>
<Content>
<Card>
<CardItem style={{backgroundColor:'grey'}}>
<Body>
<Text>Latitude: {this.state.latitude}</Text>
<Text>Longitude: {this.state.longitude}</Text>
{this.state.error ? <Text>Error: {this.state.error}</Text> : null}
</Body>
</CardItem>
</Card>
</Content>
</Container>
);
}
}

export default App;
Explaination of App.js :

In this code we are importing some component from native base ,so we need to add this dependency in our project as follow:

npm install native-base --save

and

react-native link

In App class we have constructor and two function namely  componentDidMount() and render()

constructor
constructor(props) {
super(props);

this.state = {
latitude: null,
longitude: null,
error: null,
};
}

In this constructor initial value of latitude, longitude and error are define to null.

componentDidMount() method:
componentDidMount() {
navigator.geolocation.getCurrentPosition(
(position) => {
this.setState({
latitude: position.coords.latitude,
longitude: position.coords.longitude,
error: null,
});
},
(error) => this.setState({ error: error.message }),
{ enableHighAccuracy: true, timeout: 20000, maximumAge: 1000 },
);
}

The componentDidMount() method is  called at the time of  initializing of a component .so when this method is called we find the location of mobile by calling getCurrentPosition() method as shown above in code.

 

navigator.geolocation.getCurrentPosition() has three argument
(position) => {
this.setState({
latitude: position.coords.latitude,
longitude: position.coords.longitude,
error: null,
});
}

This is a  success callback parameter of getCurrentPosition() method ,we are collecting result in position .

and position object look like:

{
    "timestamp": 1484669056399.49,
     "coords": {
           "accuracy": 5,
           "altitude": 0,
           "altitudeAccuracy": -1,
           "heading": -1,
           "latitude": 37.785834,
          "longitude": -122.406417,
          "speed": -1
     }
}

from this position object we collect the latitude and longitude as follow:

position.coords.latitude

position.coords.longitude

These values are assign to latitude and longitude of App class by following code

this.setState({
latitude: position.coords.latitude,
longitude: position.coords.longitude,
error: null,
});
(error) => this.setState({ error: error.message })

This is the second argument of getCurrentPosition() method ,and this is an error callback parameter of method ,in this we are collecting error in error if it occur. and with the help of setState() method ,we are storing the error message into error of App class.

{ enableHighAccuracy: true, timeout: 20000, maximumAge: 1000 }

This is the third argument of getCurrentPosition() method, a configuration object, in this we are suppling three value   enableHighAccuracy: true, timeout: 20000, maximumAge: 1000.

render() {
return (
<Container>
<Content>
<Card>
<CardItem style={{backgroundColor:'grey'}}>
<Body>
<Text>Latitude: {this.state.latitude}</Text>
<Text>Longitude: {this.state.longitude}</Text>
{this.state.error ? <Text>Error: {this.state.error}</Text> : null}
</Body>
</CardItem>
</Card>
</Content>
</Container>
);
}
}

In this render method we are creating a card and on this card we are printing the location of mobile in terms of latitude and longitude if error is null otherwise we print the error on screen of mobile.

So this about all about React Native Geolocation- GPS. If you phase any  problem in implementing please let us know by commenting below.

Want GIS application – Please contact us at juhi@engineerphilosophy.com

More on GIS –