1.
How to use Geolocation, Geocoding in React Native
Apps?
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.

2.
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

3.
NAME CODE DESCRIPTION
PERMISSION_DENIED 1 Location permission is not granted
POSITION_UNAVAILABLE 2 Location provider not available
TIMEOUT 3 Location request timed out
PLAY_SERVICE_NOT_AVAILABLE 4
Google play service is not installed or has an older
version (android only)
SETTINGS_NOT_SATISFIED 5
Location service is not enabled or location mode is not
appropriate for the current request (android only)
INTERNAL_ERROR -1
Library crashed for some reason
or the getCurrentActivity() returned null (android only)
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.
For obtaining user location you have to import Geolocation API from a react-native-
geolocation-service package like this.
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 }
);
}

4.
So after adding all this code your file something look like this.
1
2
3
4
5
6
7
8
9
10
11
12
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

5.
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.
1
2
3
4
5
6
7
8
9
10
11
12
13
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,

6.
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
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) => {

7.
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
// 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,

8.
60
61
62
63
64
65
66
67
68
69
70
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.
InnovationM Technology Solutions
A-36, Sector-4 Noida 201310
Sales@innovationm.com
https://www.innovationm.com/
+91 7838065578