Install SDK for React Native
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
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
Recommended additional steps
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.