In this post, we will learn, How to implement Geolocation in your App?<\/p>\n
Geolocation will find your current location and Geocoding gives your address (like City Name, Street Name, etc) by Coordinates (Latitude and Longitude). The most famous and familiar location feature \u2014 Geolocation<\/strong> 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\u2019s whereabouts right down to latitude and great circle coordinates, or more practically, a physical address. Both mobile and desktop devices can use geolocation.<\/span><\/p>\n Geolocation<\/strong> is accustomed to confirm zone and actual positioning coordinates, like for chase life or shipment shipments.<\/span><\/p>\n What is Geocoding and Reverse geocoding?<\/strong><\/p>\n Geocoding<\/strong> is the method of remodeling an address or alternative description of a location into a (latitude, longitude) coordinate.<\/p>\n 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.<\/p>\n Post structure STEPS<\/strong><\/p>\n We have three major objectives<\/strong><\/p>\n Step 1: – Create a simple React Native app<\/strong><\/p>\n If you’re aware of native development, you’ll doubtless need to use React Native user interface. npm install -g react-native-cli Step2 :- react-native-geolocation-service NOTE:<\/strong> Location requests can still timeout since many android devices have GPS issues on the hardware level or in the system software level.<\/p>\n Installation:<\/strong><\/p>\n yarn add react-native-geolocation-service<\/strong><\/p>\n npm install react-native-geolocation-service iOS: Update your Podfile<\/p>\n pod ‘react-native-geolocation’, path: ‘..\/node_modules\/@react-native-community\/geolocation’<\/strong><\/p>\n Then run pod install from ios directory<\/p>\n Error Codes One\u00a0issue\u00a0to notice, this library assumes that location permission is already granted by the user,\u00a0thus\u00a0you have got\u00a0to use PermissionsAndroid to request for permission before\u00a0creating\u00a0the placement\u00a0request.<\/p>\n For\u00a0obtaining\u00a0user location\u00a0you have to\u00a0import Geolocation API from a\u00a0react-native-geolocation-service<\/strong> package like this.<\/p>\n<\/div>\n import Geolocation from ‘react-native-geolocation-service’; if (hasLocationPermission) { So after adding all this code your file something look like this.<\/strong><\/p>\n Step 4:- User Geolocation into an address (Reverse Geocoding)<\/strong><\/p>\n We used a react-native-geocoding<\/strong> package for Geocoding and Reverse Geocoding. This module uses the Google Maps Geocoding API and requires an API key for purposes of quota management. Please check this\u00a0<\/a><\/strong>link<\/a>\u00a0to obtain your API key.<\/p>\n Install<\/strong><\/p>\n npm install –save react-native-geocoding import Geocoder from ‘react-native-geocoding’;<\/strong><\/p>\n And then you have to initialize the module in your app<\/p>\n Geocoder<\/span>
\n
\nWhat is Geolocation?
\n<\/strong><\/p>\n
\n<\/strong>
\nWe will go in a step-by-step manner to explore the Geolocation.<\/p>\n\n
\n
\nIt needs Xcode or Android Studio to get started.
\nIf you have already got one of these tools installed, you should be able to get up and running within some minutes.
\nIf they’re not installed, you should expect to spend about an hour installing and configuring them.
\n<\/strong>
\nReact Native CLI Quickstart
\n<\/strong>
\nAssuming that you just have Node 10+ installed<\/strong>, you’ll be able to use npm<\/strong> to install the React Native cli command-line utility:<\/p>\n
\n<\/strong>
\nThen run the following commands to create a new React Native project known as\u00a0 \u201cAwesomeProject<\/strong>\u201d:<\/p>\nreact-native init AwesomeProject<\/strong><\/h5>\n
\n<\/strong>
\nThis 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\u2019s new FusedLocationProviderClient<\/strong> 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.<\/p>\n
\n<\/strong>
\nSetup:
\n<\/strong>
\nAndroid:
\n<\/strong>
\nNo additional setup is required for Android.<\/p>\n
\n<\/strong>
\nEnable geolocation in the background, you will include the NSLocationAlwaysUsageDescription<\/strong> key in Info.plist<\/strong> and add location as a background mode in the ‘Capabilities’ tab in Xcode<\/strong>.<\/p>\n
\n<\/strong><\/p>\n\n\n
\n \n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 Name<\/th>\n \u00a0Code<\/th>\n \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0Description<\/th>\n<\/tr>\n<\/thead>\n \n \u00a0PERMISSION_DENIED<\/td>\n \u00a0 \u00a01<\/td>\n \u00a0 Location permission is not granted<\/td>\n<\/tr>\n \n \u00a0POSITION_UNAVAILABLE<\/td>\n \u00a0 \u00a02<\/td>\n \u00a0 Location provider not available<\/td>\n<\/tr>\n \n \u00a0TIMEOUT<\/td>\n \u00a0 \u00a03<\/td>\n \u00a0 Location request timed out<\/td>\n<\/tr>\n \n \u00a0PLAY_SERVICE_NOT_AVAILABLE<\/td>\n \u00a0 \u00a04<\/td>\n \u00a0 Google play service is not installed or has an older version\u00a0 \u00a0 \u00a0 \u00a0 \u00a0(android only)<\/td>\n<\/tr>\n \n \u00a0SETTINGS_NOT_SATISFIED<\/td>\n \u00a0 \u00a05<\/td>\n \u00a0 Location service is not enabled or location mode is not
\nappropriate for the current request (android only)<\/td>\n<\/tr>\n\n \u00a0INTERNAL_ERROR<\/td>\n \u00a0 -1<\/td>\n \u00a0 Library crashed for some reason or\u00a0 \u00a0 \u00a0the\u00a0 getCurrentActivity()<\/code>\u00a0returned null (android only)<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
\nStep 3:-Get User Current Location (Geocoding)
\n<\/strong>
\nSince this library was meant to be a drop-in replacement for the RN\u2019s Geolocation API, the usage is pretty\u00a0uncomplicated, with some\u00a0further\u00a0error cases to handle.<\/p>\n
\n<\/strong>
\nAnd add this function into your code<\/p>\n
\nGeolocation.getCurrentPosition(
\n(position) => {
\nconsole.log(position);
\n},
\n(error) => {
\n\/\/ See error code charts below.
\nconsole.log(error.code, error.message);
\n},
\n{ enableHighAccuracy: true, timeout: 10000, maximumAge:10000 }
\n);
\n}<\/p>\n componentDidMount() {\r\n Geolocation.getCurrentPosition(\r\n (position) => {\r\n console.log(position);\r\n },\r\n (error) => {\r\n \/\/ See error code charts below.\r\n console.log(error.code, error.message);\r\n },\r\n { enableHighAccuracy: false, timeout: 10000, maximumAge: 100000 }\r\n );\r\n }<\/pre>\n<\/div>\n
\nA geocoding module in React native to get a location description (Street Address, City Name, etc) via coordinates(Latitude and longitude).<\/p>\n
\n<\/strong>
\nYou can just\u00a0 import Geocoder API from a react-native-geocoding<\/strong> package in your App.<\/p>\n