React Native Basics: Geolocation

I’ve been using the Geolocation API in React Native a fair amount lately. It’s an API that I didn’t realize existed in React Native and definitely didn’t realize how easy it was to actually use. React Native has some great polyfills that bring APIs that we’ve gotten used to on the web to mobile which makes using them insanely easy. The Geolocation API in React Native is simply an extension of the web spec. This post will basically be a rehash of the official documentation with some additional commentary and examples. I encourage you to read the official documentation in addition to this. React Native Geolocation Web Geolocation API Installation Installation is really straightforward. On iOS the necessary key in the Info.plist ( ) is already set when you create a new app. If you want to use a user’s location when the app is in the background you’ll have to do . NSLocationWhenInUseUsageDescription some additional configuration On Android it’s similarly simple, just not enabled by default. In your you’ll need to add the following permission request AndroidManifest.xml The reason it comes enabled by default on iOS but not Android comes down to how & when each platform requests permission to use location data. On iOS permission is requested the first time you try to use it, on Android it’s requested upon app download. Because of this if the location permission came enabled by default on Android a user will see what it’s requesting (location data) and if your app doesn’t have a good reason to need their location information then they may not download your app. API Overview The geolocation api exists on the global object in React Native, just like on the web, so you would access it via . navigator navigator.geolocation I’ll be covering three of the methods available on — , , and . navigator.geolocation getCurrentPosition watchPosition clearWatch allows us to request a user’s location at any time. It accepts three parameters — a success callback, an error callback, and a configuration object (in that order). The success callback will be passed an object that looks like getCurrentPosition The error callback will be passed a standard error message. And finally the config object has — which allows you to get the most accurate location. Due to how it gets the location (via GPS) it may be slower to return a result but it will be more accurate when enabled. enableHighAccuracy (boolean) — how long does the API have to return the position before throwing an error? timeout (milliseconds) — if a location exists in the device cache, how old can it be before it’s no longer valuable to your app? maximumAge (milliseconds) is very similar to getCurrentPosition. The only difference is that the success or error callback will be called whenever the user’s location updates. There’s also an extra option in the config object and that’s this will allow you to specify how many meters a user has to move before a callback is triggered again. watchPosition distanceFilter should be used any time is used. This will tell the device that your app no longer needs location information. Just like you should always clear an interval, you should always clear a position watch when the app unmounts or you no longer need it. clearWatch watchPosition Example getCurrentPosition You can see above just how simple it is to access the current location with this API. watchPosition Example You can see there that using watch position is very similar to fetching the position, it just happens whenever the location changes. It’s important to note two things Make sure to clear the watch when the component is unmounted (see line 30) If you don’t need realtime updating location information use instead as it will be less battery intensive getCurrentPosition Want to see what using Geolocation is like in a production quality app? Checkout (one of many)! this React Native course is how hackers start their afternoons. We’re a part of the family. We are now and happy to opportunities. Hacker Noon @AMI accepting submissions discuss advertising &sponsorship To learn more, , , or simply, read our about page like/message us on Facebook tweet/DM @HackerNoon. If you enjoyed this story, we recommend reading our and . Until next time, don’t take the realities of the world for granted! latest tech stories trending tech stories