React Native: Using Native Modules for Location Services

About Location Services

Location-based services are a common utility in mobile apps. Typical use cases range anywhere from serving ads relevant to a certain location, to presenting special content at specific places, to out-right navigational aid. If you should find that your own react native app would benefit from location services, there are a few approaches we can take.

The easiest, of course, is pure react native! The documentation leaves a bit to be desired, but if you only need location info while your app is open and does not require any advanced features, you can get location info in your app using an extension to the GeoLocation Web Spec.

In some instances, you may need more customizable location services, or periodic updates in the background. In these instances, there is no avoiding it – we’ve gotta dust off our objective-c skills and go with a native module. Fortunately, Apple provides the means for us to approach Location Services in a few different ways. In this example, we will make a Native Module that uses Significant-Change Location Service, which provides a good balance between power-saving and accuracy.

Updating info.plist

Let’s first take care of some housekeeping before we start writing code. Open up Xcode or an inline editor and add the following entitlements:

N.B – these keys changed slightly starting with iOS 11, so if you support older versions, the NSLocationAlwaysUsageDescription key is also required. 

You’ll also need to open up the Project Editor in Xcode (by double-clicking the top-most node of the Project Navigator). Under the “Targets” section, toggle Background Modes to be ON and check both Location Updates and Background Fetch from the list.

location

With that done, we are ready to start bridging our javascript to native code!

Adding the Native Module

If you’ve written iOS apps in Swift or Objective C, the process of adding a native module should be very familiar, since a Native Module is just an Objective-C class that implements whatever native API we can’t get to in React Native via an existing module. We start by creating a header file that will define the module, like so:

Now, let’s create the module:

It’s important that before we attempt to start getting location info, we request the users permission to use that capability. Notice also, that we request the more intense permission () and fall back to the less demanding option if possible. As is always the case in The Land of Apple, we only have one chance to ask for these permissions in-app (though a user can always modify them from settings), so carefully consider when and where in the app this should occur. Generally speaking, it’s best to ask for permissions only at the time the app starts needing them, so that the user is saturated with requests up front.

Once we’ve identified an appropriate place to request location data, we can import our native module and make the request:

We’re now ready to get location data! From here, we have a few options for using info from our native module. We can subscribe to events, or call custom methods directly as above, depending on our needs. Be sure to review the documentation for the implementation that most suits your needs.

For now though, let’s test our native module using basic logging , which we added to MyLocationDataManager.m on line 98. The easiest way to test significant location change is via the simulator, which allows us the control of mocking a location without leaving the comfort of our chairs 🙃

Once the simulator is running and the app has started (via normal react-native run-ios, or deployed directly from XCode), we can launch the debugging bridge and open an inspector so we can see the console output as it is emitted from the app. Once our connected, we can navigate in-app to where we request location data. We should see our permission request:

Screen Shot 2019-07-19 at 11.08.50 AM.png

From the Simulator menu, we can update the simulator location of our device from the Debug dropdown:

Screen Shot 2019-07-19 at 11.13.08 AM.png

…and the change is emitted into the console via RCTLogInfo. 

Screen Shot 2019-07-19 at 11.14.09 AM.png

We did it! With location data verified, we’re now ready to write up whatever more sophisticated implementation(s) suit our needs. But, that’s an exercise for another day 🤔

Troubleshooting Tips

If you’re having trouble getting the location data permissions to show, here are some common questions to ask:

  • is info.plist updated with the required entitlements? Are the entitlement keys free of typos?
  • is info.plist using the correct keys? NSLocationAlwaysAndWhenInUseUsageDescription for iOS 11 and beyond and NSLocationAlwaysUsageDescription for anything prior? Are both keys included if older and contemporary iSO versions are supported?
  • have Background Modes been enabled from the Project Editor?
  • have we requested the users’ permission prior to subscribing to location change events or querying for location data explicitly?
  • has permission for location data previously been denied to the app?

Hopefully this brief look at Native Modules in React Native was illuminating! Stay tuned for a follow up post about getting location data in Android, and check out the official documentation in the meantime

Shout out to npomfret, whose source repo here heavily influenced the content for my example location manager above.  

Photo Credit: Capturing the Human Heart on UnSplash

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s