Location Tracking with React Native
In our fast market project, it is very important for us to track the location of the couriers in real-time in terms of choosing the courier closest to the order.
At first glance, real-time location tracking may seem difficult for a project written with React Native because we usually code with JavaScript and the JavaScript code will not work when the application is closed or it is in the background. For this reason, a native solution is required to be applied.
In our search for a library solving this issue natively, we first tried to use a free and open-source library named mauron85/react-native-background-geolocation; but it didn’t support the iOS side. We turned towards the transistorsoft/react-native-background-geolocation library, which has gained more recognition in the React Native world, and we got very successful results both on iOS and Android. This library is paid on the Android side and you can use a license you buy, both in your test and production application. (provided that your applicationId has “.staging’’ suffix)
When it comes to the solution used by the library for location tracking in the background, it works very efficiently with Headless Task, which is already available in React Native on the Android side; but when a background task is created on the iOS side and the location change exceeds a certain distance while the application is in the background, it awakes your application in the background and acts as if running in the foreground. For a more detailed explanation, check out this video.
When it comes to the problems we encountered:
iOS 13+ Permission for Location Tracking in the Background
In iOS 13 and higher versions, it has been forbidden to request permission for location tracking in the background directly from the user with the help of pop-ups. We had to direct users to the settings section to request permission when the application is first installed.
Location/Time-Based Tracking
When we integrated the library into the project, we were making real-time tracking based on the location change as suggested, but this was not meeting our needs. We were requiring that the latest location information was recent, even if the courier was not on the move. Thus, we switched to the time-based tracking method. We send the location information to the Back-End in a minute if the courier is not moving, and in seconds at shorter intervals, if the courier is on the move. Since this method inherently consumes the battery of the phones quickly, we recommend you make location-based tracking if it meets your needs.
Power Mode on Phones
Since we continuously track the location of the couriers, the operating systems automatically turn on the power mode, particularly on the Android side, and prevent location tracking when the application is in the background. Here, we continuously monitor both the battery status and whether the power mode is on or not and then inform the courier. If the power mode is on, we do not direct orders to that courier.
Library Use
There are three steps to use the transistorsoft/react-native-background-geolocation library:
- Installation, configuration
- Start/Stop Processes
- Listener functions
Installation, configuration
You conduct this process by running the BackgroundGeolocation.ready function with certain parameters. The most important point underlined here is that when your app is first opened, this function shall run just for once. You may not get correct results if you call it several times.
If you integrate it as shown in the example in the document or with the initial parameters, it will probably meet most of your needs related to location and thus, you can make location-based tracking.
Android — Time Based Tracking
BackgroundGeolocation.ready(
{
...defaultConfig,
distanceFilter: 0,
locationUpdateInterval: 6000, // get location on every per minute
},If you want to make time-based tracking, first you need to set the distanceFilter parameter to 0. Normally, we will send location information when there is a certain distance difference from the last received location, but here we receive location once a minute even if the courier does not move. The most delicate part of this is that this configuration makes no sense if the courier moves. In the case of motion, the app will send us the location information every time the location changes.
Start/Stop Processes
After making the configuration given above, you need to call BackgroundGeoLocation.start() function; but the ready, a configuration function, returns a promise to us and after completing this, BackgroundGeolocation.start() function needs to be called. Otherwise, the methods will not work. When you don’t need location information, you can call BackgroundGeolocation.stop() function and stop listening location. So, you don’t waste your phone’s battery unnecessarily.
Listener Functions
Bu kütüphane bir kaç dinleyici fonksiyona sahip. Bizim kullandıklarımız şunlar:
- onHeartbeat: Function that is triggered periodically according to the value set to heartbeatInterval, we generally use it for logging.
- onLocation: Function that is triggered every time the location is received.
Location Tracking in the Background
Android Headless Mode
Headless JS is used on the Android side. You can add it to your app’s index.js file as follows.
BackgroundGeolocation.registerHeadlessTask(<JS Function>);
Don’t forget to add the following parameters in the configuration as well.
BackgroundGeolocation.ready({
...defaultConfig,
enableHeadless: true,
stopOnTerminate: false,
})When the app is taken in the background or closed, this section steps in and starts working according to the parameters we set to the ready function.
iOS Background Location Tracking
For iOS, you need to enable location updates and background fetch parameters in the Background Modes settings with XCode. For detailed installation, you can check out this.
On iOS, the app continues to run smoothly when it is put in the background; but location listening is interrupted if the app is closed. If the courier moves at 100–200 meters, the app will boot in the background and the location listening services will start running again.
Location Permissions
The permissions we use for location tracking with the react-native-permissions library are as follows:
const backgroundLocationPermission = Platform.select({
ios: [PERMISSIONS.IOS.LOCATION_ALWAYS],
android: [
PERMISSIONS.ANDROID.ACCESS_BACKGROUND_LOCATION,
PERMISSIONS.ANDROID.ACCESS_FINE_LOCATION,
],
});Conclusion
We will continue to share our experiences on Friday every week. We hope our experience will be of help to you, see you in the next post, bye-bye :)
