Many mobile app development teams choose React Native to build apps in a cost-effective manner. The platform allows simultaneous development for both iOS and Android at the same time. This is possible because of native modules that are created for each platform and share common API for developers to consume.

Recently, we needed to add location tracking functionality to one of our React Native projects. We decided to leverage an existing location tracking package – both to ensure the tracking functionality was comprehensive, and for development efficiency.

Selecting a package can be difficult. Factors like support, community activity, update frequency and pricing nearly always play a part. Then there are needs specific to your use case. Our app needed to constantly track location in the background. That meant the package also needed to have reasonable energy consumption and offline support – otherwise we ran the risk of the app being too intrusive, or just not working as expected.

We assessed multiple solutions, and ultimately decided to leverage the React Native Background Geolocation package by Transistor Software. In this blog, we’re breaking down how it worked for us – with a particular focus on battery efficiency and offline support.

Battery efficiency

Location tracking using GPS can drain a phone battery quickly. When the location tracking is happening in the background, a significant portion of your user base may be inclined to delete your app if the OS indicates it has a high energy usage. React Native Background Geolocation applies a few techniques to reduce battery drain by default but also allows for optimisation for your specific use-case.

The package has two states: moving and stationary. It automatically toggles between these states by monitoring the native motion activity API events that the OS provides. These events are controlled by a combination of the accelerometer, gyroscope and magnetometer of the phone. When the plugin detects a still motion-activity, the plugin will enter the stationary state and location tracking will be kept to a minimum. When the plugin detects a moving motion-activity location tracking will kick in as pre-configured.

React Native Background Geolocation implements the management of this moving and stationary state a bit differently between both platforms. A quick comparison of steps between the 2 platforms:

iOS is more restrictive in background activity for apps and as such doesn’t allow for constant monitoring of its motion activity API. This plugin works around this limitation by creating geofences to wake itself up. As a consequence your app will have very low energy consumption while being still.

Offline support

A device can be offline for many reasons – like poor network connection or travel – which makes it difficult to get a consistent log of locations without gaps. That means, when this log of locations is displayed to a user, it looks like the app isn’t functioning as intended. It also limits the data we have available to infer user behavior, which could be used to provide a better user experience in the future.

React Native Background Geolocation handles this by storing a database on the device. When a location is recorded it is immediately saved to this database on the device. The device will then try to send this location log to your server when it is back online (and remove it from the local database when a success response is returned).

On top of this there also is a convenient batching mechanism in the package. You can configure a threshold value for the minimum size of a batch of location logs before they are sent to the server. Batching location logs also reduces battery drain because we are reducing the amount of network requests. This can be a big contributor to battery drain when it happens continuously.

Ultimately, React Native Background Geolocation worked well for us. It handled our two main concerns – battery efficiency and offline support – with ease. We also found the team at Transistor Software to be responsive and supportive, which is a huge advantage when implementing a new package. By leveraging this technology, we created a performant React Native location tracking app, that’s being successfully used in market today.