Can You Track Background Geolocation with React Native? A Complete Guide with Code Examples for iOS and Android

Can You Track Background Geolocation with React Native?

If you are developing a mobile app using React Native and need to track a user’s location even when the app is in the background, you might be wondering if it’s possible. The use case could be a fitness app where users want to track their running distance by starting the tracking, switching to another app, and locking their phone until the end of their run. In this blog post, we’ll explore whether it is possible to track background geolocation with React Native and discuss different approaches for both iOS and Android platforms.

Using Expo

If you are using Expo, the process of implementing background geolocation becomes much easier. Expo introduced a feature in SDK 33 that allows background location tracking. Here’s an example of how you can enable it:

import React from 'react';
import { Text, TouchableOpacity } from 'react-native';
import * as TaskManager from 'expo-task-manager';
import * as Location from 'expo-location';

const LOCATION_TASK_NAME = 'background-location-task';

export default class Component extends React.Component {
  onPress = async () => {
    await Location.startLocationUpdatesAsync(LOCATION_TASK_NAME, {
      accuracy: Location.Accuracy.Balanced,
      timeInterval: 5000,
    });
  };

  render() {
    return (
      <TouchableOpacity onPress={this.onPress} style={{marginTop: 100}}>
        <Text>Enable background location</Text>
      </TouchableOpacity>
    );
  }
}

TaskManager.defineTask(LOCATION_TASK_NAME, ({ data, error }) => {
  if (error) {
    alert(error)
    return;
  }
  if (data) {
    const { locations } = data; 
    alert(JSON.stringify(locations));
    // Do something with the locations captured in the background
  }
});

This code snippet demonstrates how to start background location updates using Expo. Note that you cannot use geolocation in the Expo app itself, but you can use it in your standalone build. Therefore, in order to access a user’s background location, you need to build your app using expo build:ios and upload it to the App Store.

Using Third-Party Libraries

If you are not using Expo or need more advanced background geolocation capabilities, there are several third-party libraries available for React Native. Two popular options are React Native Background Geolocation and React Native Background Geolocation by mauron85. These libraries provide extensive features and allow you to track background geolocation on both iOS and Android platforms.

Using the React Native Geolocation Library

If you prefer a simpler solution without additional dependencies, you can use the React Native Geolocation library. This library offers an easy-to-use API and handles permissions automatically. Here’s an example of how to use it:

import Geolocation from 'react-native-geolocation';

Geolocation.watchPosition((position) => {
  const { latitude, longitude } = position.coords;
  // Do something with the location
});

This code sets up a watch position handler that continuously tracks the user’s location. It requires including the background modes fetch and location in your info.plist section of the app.json file.

Conclusion

In this blog post, we discussed different approaches for tracking background geolocation in a React Native app. The easiest way is to use Expo and enable background location tracking through Expo’s API. However, if you need more advanced features or are not using Expo, you can rely on third-party libraries such as React Native Background Geolocation. Alternatively, the React Native Geolocation library provides a simple solution without additional dependencies. With these options, you can track a user’s location even when your app is running in the background on both iOS and Android platforms.

Remember to consider the specific needs of your app and choose the approach that best suits your requirements. Happy coding!

reference : 

reactjs