React Native

Last updated 16 days ago

Get started by plugging in the React Native module in your app

The React Native module is built on top of HyperTrack’s native iOS and Android SDKs. Sign up here to get your keys, and the follow the steps below to add the module.

Step 1: Install module

Install the module in your project directory via npm and then link the module

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

Step 2: Setup dependencies

iOS

  1. Ensure that you have CocoaPods installed in your system; if not follow these instructions to install it. If you are not using CocoaPods in your ios project, then open terminal and run the following command from your project's ios directory.

# Change directory to your project's ios directory and run the following command.
$ cd ios
$ pod init

2. Open the Podfile that was created as a result of the above command and add an entry for HyperTrackCore SDK to this file.

Podfile
# Uncomment the next line to define a global platform for your project
platform :ios, '9.0'
target <Your App Target> do
# Comment the next line if you're not using Swift and don't want to use dynamic frameworks
use_frameworks!
# Pods for YourApp
pod 'HyperTrackCore'
...
post_install do |installer|
installer.pods_project.targets.each do |target|
target.build_configurations.each do |config|
config.build_settings['SWIFT_VERSION'] = '4.1'
end
end
end
end

3. Go to terminal and run the following command to add the SDK to your project.

$ pod install

4. Close the <Your Project>.xcodeproj file and open <Your Project>.xcworkspace

Manually linking on iOS: After the Cocoapods are setup, you need to manually link the wrapper code. This is a required step, in addition to the link command described previously.

5. Open the iOS module files located inside node_modules/hypertrack-react-native/_ios/.

6. Open the app workspace file AppName.xcworkspace in Xcode.

7. Move RNHyperTrack.h and ios/RNHyperTrack.m files to your project. When shown a popup window, select Create groups.

Android

  1. Edit the build.gradle file in your android/app directory

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

2. Add maven for Google Play Service Libraries

// 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'
// 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'
}
}
}

Step 3: Import module

iOS

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

Android

import RNHyperTrack from 'hypertrack-react-native';

Combined

If you have a common app file for both Android and iOS, use the following snippet to define RNHyperTrack

import { NativeModules } from 'react-native';
import {RNHyperTrack as RNHyperTrackImport} from 'hypertrack-react-native';
if (NativeModules.RNHyperTrack != undefined) {
// Import for iOS setup
var RNHyperTrack = NativeModules.RNHyperTrack;
} else {
// Import for Android setup
var RNHyperTrack = RNHyperTrackImport;
}

Step 4: Change configurations (iOS only)

Enable location & motion permissions

To configure Always authorization for location services, add following entries to the Info.plist file.

Configuration for Always authorization of location services

To configure When-In-Use authorization for location services, add following entries to the Info.plist file.

Configuration for When-In-Use authorization of location services

Enable background modes

Turn on Background Modes and make sure the following three options are selected:

  1. Location updates

  2. Background Fetch

  3. Remote Notifications

Turning on background modes

Step 5: Get permissions

Get location permission from the app user on the device. Also check if the user has turned on location services on the device.

// Call this method to request Location Permission for Android & iOS
async requestLocationPermission(){
var enabled= await RNHyperTrack.requestLocationPermission();
console.log(enabled)
}
// Call this method to check Location Permission for Android & iOS
async checkLocationPermission(){
var enabled= await RNHyperTrack.checkLocationPermission();
console.log(enabled)
}

In addition, get motion permission for iOS. Make sure that the permission strings (see previous step) are defined in your app.

// Call this method to request Motion Permission for iOS (will return error on Android)
async requestActivityPermission(){
var enabled= await RNHyperTrack.requestActivityPermission();
console.log(enabled)
}

Step 6: Initialize SDK

Initialize the SDK with your publishable key in the constructor of your component class

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

Step 7: Run your app

You are all set. It’s now time to compile and run your app.

Congratulations on configuring your app with the SDK