Skip to main content

Install SDK for React Native

GitHub 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​

Add HyperTrack SDK to your project​

yarn add hypertrack-sdk-react-native

Android​

In android/build.gradle:

Set inside ext.buildscript:

- compileSdkVersion to 31 or higher
- minSdkVersion to 23 or higher

Add those lines in repositories section:

maven {
    name 'hypertrack'
    url 'https://s3-us-west-2.amazonaws.com/m2.hypertrack.com/'
}

iOS​

Add HyperTrack iOS SDK to your Podfile​

The native iOS SDK is distributed using CocoaPods dependency manager.

If you don't have CocoaPods, install it first. Using the latest version is advised.

In your project's ios directory, create a Podfile (if you don't have one).

cd ios
pod init

HyperTrack iOS SDK supports iOS 11 and above, that's why platform :ios, '11.0' is included explicitly. And lastly, add the post_install script to keep dependencies with the correct Swift version.

require_relative '../node_modules/react-native/scripts/react_native_pods'
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'

platform :ios, '11.0'

target 'Quickstart' do
  config = use_native_modules!

  use_react_native!(:path => config["reactNativePath"])

  # Enables Flipper.
  #
  # Note that if you have use_frameworks! enabled, Flipper will not work and
  # you should disable these next few lines.
  use_flipper!
  post_install do |installer|
    flipper_post_install(installer)
  end
end

Install the native HyperTrack SDK through CocoaPods:

pod install
info

If you are using Xcode 12 and newer, open your workspace in Xcode, right-click on Your App Name in the Project Navigator on the left, and click New File. Create a single empty Swift file to the project (make sure that Your App Name target is selected when adding) when Xcode asks, press Create Bridging Header and do not remove Swift file then.

We constantly work on making our SDKs better, so make sure you have the latest version. You can get it in the changelog here.

Enable Background Modes​
Add purpose strings​

Set up silent push notifications​

The SDK has a bi-directional communication model with the server. This enables the SDK to run on a variable frequency model, which balances the fine trade-off between low latency tracking and battery efficiency, and improves robustness. This also enables HyperTrack Trips to start and stop tracking automatically when trip starts and ends. For this purpose, the iOS SDK uses APNs silent remote notifications and Android SDK uses FCM silent notifications.

Initialize the SDK​

Get your publishable key from the Setup page.

import { HyperTrack } from 'hypertrack-sdk-react-native';

const PUBLISHABLE_KEY = "Paste_your_publishable_key_here";

const hyperTrack = await HyperTrack.initialize(PUBLISHABLE_KEY);

Start tracking​

Now the app is ready to be tracked from the cloud. HyperTrack gives you powerful APIs to control device tracking from your backend.

To use the HyperTrack API, you will need the {AccountId} and {SecretKey} from the Setup page.

Track devices during work​

Track devices when user is logged in to work, or during work hours by calling the Devices API.

To start, call the start API.

curl -X POST \
  -u {AccountId}:{SecretKey} \
  https://v3.api.hypertrack.com/devices/{device_id}/start

Get the tracking status of the device by calling GET /devices/{device_id} api.

curl \
  -u {AccountId}:{SecretKey} \
  https://v3.api.hypertrack.com/devices/{device_id}

To see the device on a map, open the returned embed_url in your browser (no login required, so you can add embed these views directly to you web app). The device will also show up in the device list in the HyperTrack dashboard.

To stop tracking, call the stop API.

curl -X POST \
  -u {AccountId}:{SecretKey} \
  https://v3.api.hypertrack.com/devices/{device_id}/stop

Track routes with ETA​

If you want to track a device on its way to a destination, call the Routes API and add destination.

HyperTrack Trips API offers extra fields to get additional intelligence over the Devices API.

  • set destination to track route and ETA
  • set scheduled_at to track delays
  • share live tracking URL of the trip with customers
  • embed live tracking view of the trip in your ops dashboard
curl -u {AccountId}:{SecretKey} --location --request POST 'https://v3.api.hypertrack.com/trips/' \
--header 'Content-Type: application/json' \
--data-raw '{
    "device_id": "{device_id}",
    "destination": {
        "geometry": {
            "type": "Point",
            "coordinates": [{longitude}, {latitude}]
        }
    }
}'

To get {longitude} and {latitude} of your destination, you can use for example Google Maps.

HyperTrack uses GeoJSON. Please make sure you follow the correct ordering of longitude and latitude.

The returned JSON includes the embed_url for your dashboard and share_url for your customers.

When you are done tracking this trip, call complete Trip API using the trip_id from the create trip call above.

curl -X POST \
  -u {AccountId}:{SecretKey} \
  https://v3.api.hypertrack.com/trips/{trip_id}/complete

After the trip is completed, use the Trips API to retrieve a full summary of the trip. The summary contains the polyline of the trip, distance, duration and markers of the trip.

curl -X POST \
  -u {AccountId}:{SecretKey} \
  https://v3.api.hypertrack.com/trips/{trip_id}

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.

Prepare for App Store and Google Play submission​

Identify devices​

All devices tracked on HyperTrack are uniquely identified using UUID. You can get this identifier programmatically in your app by calling getDeviceId() after initialization.

Another approach to identification is to 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 errors subscription 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:

const errorsSubscription = hyperTrack.subscribeToErrors { errors in
  switch (errors) {
    ...
  }
}
errorsSubscription.remove()

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:

Support​

Join our Slack community for instant responses. You can also email us at help@hypertrack.com.

Frequently Asked Questions​

Support​

Join our Slack community for instant responses. You can also email us at help@hypertrack.com.