How to Use Geolocation and Geocoding in React Native Apps
·
Join the DZone community and get the full member experience.
Join For Free
In this post, we will learn, how to implement Geolocation in a React Native application
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, etc. Geolocation uses positioning systems to trace an individual’s whereabouts right down to latitude and longitude, or more practically, a physical address. Both mobile and desktop devices can use Geolocation.
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. For example, one would possibly contain the complete address of the closest building, whereas another could contain only a city name and postal code.
Post Structure
We will go step-by-step to explore Geolocation.
Steps
- Create a simple React Native app.
- Install Plugins for Geocoding and Geolocation and get user location.
- Get a user's current location (Geocoding).
- Convert user Geolocation into an address (Reverse Geocoding).
Three Major Objectives
- Get user location in latitude and longitude (Geolocation).
- Convert that latitude and longitude to 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 be familiar with React Native user interface.
It needs Xcode or Android Studio to get started. If you already have one of these tools installed, you should be able to get up and running in 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.
Step 2: React Native Geolocation Service
This library is created in an attempt to fix the location timeout issue on Android with the React Native 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 is based on your request configuration; it automatically decides and 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
No additional setup is requried for Android. For iOS, follow these steps:
To 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
xxxxxxxxxx
pod ‘react-native-geolocation’, path: ‘../node_modules/@react-native-community/geolocation’
Then, run pod install from the iOS directory.
Error Codes
| 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 Location (Geocoding)
Since this library was meant to be a drop-in replacement for the RN’s Geolocation API, the usage is pretty simple, 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 to use PermissionsAndroid to request permission to track user location 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’;
Then, add this block to your code:
xxxxxxxxxx
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:
xxxxxxxxxx
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.
This module uses the Google Maps Geocoding API and requires an API key for quota management. Please check thislink to obtain your API key.
Installation
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
x
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.
xxxxxxxxxx
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>
<Text>
<Text>
<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.
Published at DZone with permission of Prashant Gond. See the original article here.
Opinions expressed by DZone contributors are their own.
Comments