# React Native

![npm](https://img.shields.io/npm/v/hypertrack-sdk-react-native.svg)

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

## Requirements

* [Requirements for Android](install-sdk-android#requirements)
* [Requirements for iOS](install-sdk-ios#requirements)

## Basic integration

Updating the SDK? Check out our [CHANGELOG](https://github.com/hypertrack/sdk-react-native/blob/master/CHANGELOG.md) and [Migration Guide](https://developer.hypertrack.com/docs/sdk-migration-guide) to see what's changed.

### Add HyperTrack SDK to your project

```bash NPM
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](https://developer.hypertrack.com/docs/install-sdk-android#without-centralized-repositories-declaration)

##### Configure Proguard

[Configure Proguard](https://developer.hypertrack.com/docs/install-sdk-android#configure-proguard)

#### iOS

##### Install HyperTrack SDK pod

The native iOS SDK is distributed using [CocoaPods](https://cocoapods.org) dependency manager.

Run `pod install` in your project's `ios` directory.

##### Enable Background Modes

[Enable Background Modes](install-sdk-ios#enable-background-modes)

##### Add purpose strings

[Add purpose strings](install-sdk-ios#add-purpose-strings)

### Set up silent push notifications

* [Set up push notifications (Android)](https://developer.hypertrack.com/docs/install-sdk-android#set-up-silent-push-notifications)
* [Set up push notifications (iOS)](https://developer.hypertrack.com/docs/install-sdk-ios#set-up-silent-push-notifications)

### Set the publishable key

Get your publishable key from the [Setup page](https://dashboard.hypertrack.com/setup).

* [Set publishable key (Android)](https://developer.hypertrack.com/docs/install-sdk-android#set-the-publishable-key)
* [Set publishable key (iOS)](https://developer.hypertrack.com/docs/install-sdk-ios#set-the-publishable-key)

### Grant the permissions to the app

* [Grant the permissions to the app (iOS)](https://developer.hypertrack.com/docs/install-sdk-ios#grant-the-permissions-to-the-app)
* [Grant the permissions to the app (Android)](https://developer.hypertrack.com/docs/install-sdk-android#grant-the-permissions-to-the-app)

### Set Worker Handle

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

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

See [Worker Setup](https://developer.hypertrack.com/docs/worker-setup) guide for more information.

### Start tracking

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

Follow the [Track Work](https://developer.hypertrack.com/docs/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](https://dashboard.hypertrack.com/drivers) 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.

```javascript
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.

```javascript
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:

```javascript
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](https://hypertrack.github.io/sdk-react-native/enums/HyperTrackError.html) for a full list of errors.![](https://files.readme.io/0345ba36c1a4f5406781d8d040041f158ac8ee901fa621f3e71ca745d6732238-image.png)

## Reference

For a full SDK API reference see [HyperTrack React Native SDK Reference](https://hypertrack.github.io/sdk-react-native/)

## SDK integration examples

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

* [Quickstart apps](https://developer.hypertrack.com/docs/build-your-app#quickstarts)

## Support

Join our [Slack community](https://join.slack.com/t/hypertracksupport/shared_invite/enQtNDA0MDYxMzY1MDMxLTdmNDQ1ZDA1MTQxOTU2NTgwZTNiMzUyZDk0OThlMmJkNmE0ZGI2NGY2ZGRhYjY0Yzc0NTJlZWY2ZmE5ZTA2NjI) for instant responses.