hypertrack-react-native

React native module for hypertrack-android and hypertrack-ios SDKs. Methods in the Driver SDK are covered in the current release. Our Example React Native app app is built on top of this module.

To build live location features within your own React Native app

Follow this step-by-step onboarding guide that will walk you through the sdk integration within your own app in a matter of few minutes.

In your project directory, install and link the module package from npm.

$ npm install hypertrack-react-native --save
$ react-native link hypertrack-react-native

Getting Started Android

1. Update compileSdkVersion, buildToolsVersion, support library version For the Android SDK, edit the build.gradle file in your android/app directory

• https://github.com/hypertrack/react-native-sdk-onboarding/blob/master/android/build.gradle

  android {
      compileSdkVersion 26
      buildToolsVersion "26.0.3"
      ...
  }

  dependencies {
      ...
      compile project(':hypertrack-react-native')
      compile fileTree(dir: "libs", include: ["*.jar"])
      compile "com.android.support:appcompat-v7:26.1.0"
      compile "com.facebook.react:react-native:+"  // From node_modules
      ...
  }

2. Add maven dependency for Google Libraries For the Android SDK, edit the build.gradle file in your android directory

   // Top-level build file where you can add configuration options common to all sub-projects/modules.
   buildscript {
       repositories {
           jcenter()
           maven {
               url 'https://maven.google.com/'
               name 'Google'
           }
       }
       dependencies {
           classpath 'com.android.tools.build:gradle:3.0.1'
           classpath 'com.google.gms:google-services:3.1.0'
   
           // NOTE: Do not place your application dependencies here; they belong
           // in the individual module build.gradle files
       }
   }
   
   allprojects {
       repositories {
           mavenLocal()
           jcenter()
           maven {
               // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
               url "$rootDir/../node_modules/react-native/android"
           }
           maven {
               url 'https://maven.google.com/'
               name 'Google'
           }
       }
   }

Getting started - iOS

1. The native iOS SDKs need to be setup using Cocoapods. In your project's ios directory, create a Podfile.

   $ cd ios
   $ pod init

2. Edit the Podfile to include HyperTrack as a dependency for your project, and then install the pod with pod install.

   use_frameworks!
   platform :ios, '9.0'
   
   target 'AwesomeProject' do
   
     # Pods for AwesomeProject
     pod 'HyperTrack'
   
     post_install do |installer|
           installer.pods_project.targets.each do |target|
               target.build_configurations.each do |config|
                   config.build_settings['SWIFT_VERSION'] = '3.0'
               end
           end
     end
   end

3. Open the iOS project with .xcworkspace file in Xcode and also, open the node_modules/react-native-hypertrack/ directory. Move the _ios/RNHyperTrack.h and _ios/RNHyperTrack.m files to your project as shown below.

4. Import inside Javascript.

   import { NativeModules } from 'react-native';
   var RNHyperTrack = NativeModules.RNHyperTrack;

API usage

1. Initialize the SDK

import RNHyperTrack from 'hypertrack-react-native';
...

export default class MyApp extends Component {
  constructor() {
   super();

   // Initialize HyperTrack wrapper
   RNHyperTrack.initialize("YOUR_PUBLISHABLE_KEY");
  }
}
...

Initialize sdk

The SDK needs a publisher key to iniltialoze core sdk to identify the device. The SDK has a convenience method initialize(String key) to do thay.

Method parameters

• key - Publishable key

export default class MyApp extends Component { 
    constructor() { 
    super();   
    // Initialize HyperTrack wrapper 
    RNHyperTrack.initialize('PUBLISHABLE_KEY');
}}

Request for permission

Takes a promise and returns true if permission given else false.

async requestLocationPermission(){
  var enabled= await RNHyperTrack.requestLocationPermission();
  console.log(enabled)
}

Check for permission

Takes a promise and returns true if permission present else false.

async checkLocationPermission(){
  var enabled= await RNHyperTrack.checkLocationPermission();
  console.log(enabled)
}

Request motion permission(iOS)

async requestActivityPermission(){  
 var enabled= await RNHyperTrack.requestActivityPermission();
 console.log(enabled)
}

Resume tracking

Tracking is automatically started if there is atleast one action assigned to the user. You can force pause tracking by calling stopTracking method in which case tracking won't be resumed even after assigning an action to the user. To resume the force paused tracking use resumeTracking method. Tracking will be started as soon as an action is assigned to the user.

RNHyperTrack.resumeTracking();

Pause tracking

Tracking is automatically started if there is atleast one action assigned to the user. You can force pause tracking by calling pauseTracking method in which case tracking won't be resumed even after assigning an action to the user.

RNHyperTrack.stopTracking();

Documentation

The HyperTrack documentation is at docs.hypertrack.com.

Support

For any questions, please reach out to us on Slack or on [email protected]. Please create an issue for bugs or feature requests.

Acknowledgements

Thanks to react-native-create-library which saved a few hours.