How to Use Geolocation and Geocoding in React Native Apps
How to Use Geolocation and Geocoding in React Native Apps
In this blog, we learned how to implement Geolocation and Geocoding in a React Native application in order to use user location information.
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.
You may also like: Geolocation With Titanium – Part 1.
We will go step-by-step to explore Geolocation.
- 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.
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
pod install from the iOS directory.
|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
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:
So after adding all this code your file something look like this:
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 this link to obtain your API key.
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
A working example of Geolocation and GeoCoding to React-Native Apps.
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.