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:
- index.js
- 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 –
