How to Use Geolocation in React Native With Hooks

An illustrative introduction to the Geolocation API in React Native

Jake Richards
Aug 30, 2019 · 2 min read
Image for post
Image for post

To get started using the Geolocation API in React Native, you’ll need to ensure that you have created a React Native project using react-native-cli or expo-cli. If you haven’t already, you can create a new app using the react-native-cli by doing the following.

Installing the React Native CLI via npm:

npm i -g react-native-cli

Creating a new React Native project:

react-native init geolocation-project

Installation

Now that we have a React Native project set up, we’ll need to install the React Native Geolocation module and link it to our native modules. Previously, the Geolocation API was provided directly from React Native, but it has since been moved out into its own npm package.

Install:

npm i @react-native-community/geolocation -S

Link (if using React Native CLI):

react-native link @react-native-community/geolocation

Using the API

The Geolocation API provides a couple of methods that we can leverage to retrieve the device’s geoposition: getCurrentPosition and watchPosition. If you just need to retrieve the position just once, and not listen for updates, then you’ll want to use getCurrentPosition.

However, if you’d like to subscribe to updates and listen for changes in position, you’ll need to use watchPosition.

Let’s take a look at some examples of how we can use these methods in our react components.

Get current position

Here’s an example of how we can pull in the getCurrentPosition method to display the current latitude and longitude to the user. This example also handles errors that may occur when trying to retrieve the position, and you can tweak this logic in the way that best suits your app.

Watch position

Below, I’ve created a useGeolocation hook by setting up a subscription using the watchPosition method when the component mounts and then unsubscribes when the component unmounts. This hook will force a rerender when the current position changes and will return out the updated position on each update.

Configuring Permissions

iOS

You’ll need to include NSLocationWhenInUseUsageDescription and NSLocationAlwaysAndWhenInUseUsageDescription keys in yourInfo.plist to enable geolocation when using the app.

If you need access to geolocation in the background, you’ll need to include the NSLocationAlwaysUsageDescription key in Info.plist as well and add location as a background mode in the Capabilities tab in Xcode.

Android

You’ll need to add the following to yourAndroidManifest.xml:<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>

For more details, you can reference the README.

Conclusion

Hopefully this post helps you out and gives you a good idea of how you can start using the Geolocation API in React Native. Thank you for reading, and good luck with your projects.

Better Programming

Advice for programmers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store