React Native

npm

React Native HyperTrack SDK is a wrapper around native iOS and Android SDKs that allows to integrate them into React Native apps.

Requirements

Basic integration

Updating the SDK? Check out our CHANGELOG and Migration Guide to see what's changed.

Add HyperTrack SDK to your project

npm install hypertrack-sdk-react-native \
  hypertrack-sdk-react-native-plugin-android-location-services-google \
  hypertrack-sdk-react-native-plugin-android-activity-service-google \
  hypertrack-sdk-react-native-plugin-android-push-service-firebase

⚠️
The plugins must have the same version as the main SDK dependency

Android

Set up HyperTrack repository

Add the repository to your project Gradle config (android/build.gradle)

Set up HyperTrack Maven repository in Gradle

Configure Proguard

iOS

Install HyperTrack SDK pod

The native iOS SDK is distributed using CocoaPods dependency manager.

Run pod install in your project's ios directory.

Enable Background Modes

Add purpose strings

Set up silent push notifications

Set the publishable key

Get your publishable key from the Setup page.

Grant the permissions to the app

Set Worker Handle

To link a Worker with the device you should set the worker handle:

HyperTrack.setWorkerHandle("user_id") // unique user identifier

See Worker Setup guide for more information.

Start tracking

Now the app is ready to be tracked from the cloud.

Follow the Track Work tutorial to learn how to control worker tracking from your backend (use the worker handle you set above).

Dashboard

Once your app is running, go to the dashboard where you can see a list of all your devices and their live location with ongoing activity on the map.

Recommended additional steps

Identify devices

You can tag devices with names that will make it easy to distinguish them on HyperTrack Dashboard.

HyperTrack.setName("Device name")

You can additionaly tag devices with custom metadata (and filter them in the Dashboard using metadata fields). Metadata should be representable in JSON.

HyperTrack.setMetadata({"key": "value"})

Handle errors

Use the getErrors() or subscribeToErrors() to make sure that when the driver navigates to the screen where tracking is supposed to happen, there are no blockers that can prevent that.

You can use subscription API to be able to react immediately when errors come up:

HyperTrack.getErrors().forEach((element) => {
  switch (errors) {
    ...
  }
});

const errorsSubscription = HyperTrack.subscribeToErrors { errors in
	errors.forEach((element) => {
    switch (error) {
      ...
    }
  }
}

// Call .remove() to unsubscribe
errorsSubscription.remove()

See Error API reference for a full list of errors.

Reference

For a full SDK API reference see HyperTrack React Native SDK Reference

SDK integration examples

To learn more about SDK integration examples, you may visit these resources:

Quickstart apps

Support

Join our Slack community for instant responses.