npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

mappls-intouch-react-native

v1.0.4

Published

Get Real-Time Location Tracking for your apps with Mappls InTouch SDK for React Native. Track a user's live location with our simplified InTouch SDK integration (for Android), highly customizable to your specific needs. The InTouch SDK comes with a varie

Downloads

75

Readme

Mappls Intouch React Native SDK

Introduction

Get Real-Time Location Tracking for your apps with Mappls InTouch SDK. Track a user's live location with our simplified InTouch React native SDK integration, highly customizable to your specific needs.

The InTouch SDK comes with a variety of events that enable better control and power over your tracking needs. Also get location benefits built for various applications including logistics, delivery tracking, employee tracking, and live location sharing.

To get started, explore the InTouch Demo App.

Already have an application which is build on React Native? Give it a boost with the powerful features of InTouch.

Setup

We use your Client ID to identify your account details and assign all your user's devices under a single account.

To get your Outh2 Rest API Client ID and Client Secret please login to Mappls API Dashboard

Please contact [email protected] to get InTouch SDK access to your Client ID

After getting the access, you can start with the InTouchDemo app, or Integrate the InTouch SDK in your app.

InTouchDemo app

This guide allows you to add live location tracking to your react native app. Visual Studio is the recommended development environment for building an app with the Mappls InTouch React native SDK or you can use any other IDE.

Step 1. Download the InTouchDemo App.

Click here to download the InTouchDemo App Project. Open this project in Visual Studio

Step 2. Set your key

  1. Add the Client Id and Client Secret to InputScreen.js file.

  2. Run npm install

  3. Run project on your device using simulator instance using below mentioned command line.

    npx react-native run-android

Step 3. Check your location on the InTouch dashboard

Integrate the InTouch React Native SDK

Getting started

Install the below mentioned library in your project.

npm install mappls-intouch-react-native --save

  • If using React-native<0.60 react-native link mappls-intouch-react-native

Installation

For Android and Ios add the below mentioned lines

Android

  • Add following line in android/build.gradle file:-
allprojects {
   repositories {
            mavenLocal()
            maven {
// All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
           url("$rootDir/../node_modules/react-native/android")
            }
           maven {
 // Android JSC is installed from npm
    url("$rootDir/../node_modules/jsc-android/dist")
          }

  
+       maven { url 'https://maven.mappls.com/repository/mappls/'}

           google()
           jcenter()
           maven { url 'https://www.jitpack.io' }

         }

}
  • Add following line in android/app/build.gradle file:-
defaultConfig {

applicationId "com.intouch_react_native_sample"

minSdkVersion rootProject.ext.minSdkVersion

targetSdkVersion rootProject.ext.targetSdkVersion

versionCode 1

versionName "1.0"

+ multiDexEnabled true

}

Note:

  1. Java Version 11 Required
  2. minimum compileSdkVersion 31 required

IOS

  • Add follwoing permissions in your project's plist.info
<key>NSLocationAlwaysAndWhenInUseUsageDescription</key>
<string>Your location is used to personalize content.</string>
 
<key>NSLocationAlwaysUsageDescription</key>
<string>Your location is used to personalize content.</string>

<key>NSLocationWhenInUseUsageDescription</key>
<string>Your location is used to personalize content.</string> 

<key>NSMotionUsageDescription</key> 
<string>In order to count steps I need an access to your pedometer</string>

<key>UIBackgroundModes</key>
<array>
<string>fetch</string>
<string>location</string>
</array>
  • Add following function in your project's AppDelegate.h
#import <MapplsIntouchCore/MapplsIntouchCore.h>
  • Add following function in your project's AppDelegate.m

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
[Intouch.shared setup];
}
  • Enable background fetch and location updates from Signing and Capabilities

  • run pod install from ios folder

Steps to use SDK into your project

Step 1: Import Intouch SDK

import  MapplsIntouch  from  'mappls-intouch-react-native-sdk';

Step 2. Check if Intouch SDK is already initialized

const  status = await  MapplsIntouch.isInitialized();

Step 3: Initialize Intouch SDK

Initialize the SDK with your Client ID and Client Secret and device name.Device name helps to identify the user on Portal.

MapplsIntouch.initialize(deviceName,clientId,clientSecret)
   .then(entityId  => {
   console.log(entityId);
   }).catch(err=>{
     console.log(err.message)
   });

OR

Initialize the SDK with your Client ID , Client Secret , device name and deviceId. deviceId should be unique ID for every user.

  • deviceId will be used to store the data against the particular user.
  • deviceName will be used to identify the user on Portal
MapplsIntouch.initializeWithDeviceId(deviceName,clientId,clientSecret,deviceId,
(result) => {
if (result === 'success') {
//success
 } else {
//error 
});

Note:This method can be used in case if your users uses two mobile phone. In this case, Both the mobile phone data will be pushed against the same deviceID. So ensure that before user logging into the new phone, logout the user from previous phone and call the stop tracking method. So that always tracking data will come from the single phone.

Step 4: Check if Intouch SDK is already running

const  status = await  MapplsIntouch.isRunning()

Step 5. Start tracking

Track your app user's phone live location by using the below method.

MapplsIntouch.startTracking();

You can start tracking using below three options

  • MapplsIntouch.BEACON_PRIORITY_FAST
  • MapplsIntouch.BEACON_PRIORITY_OPTIMAL(default)
  • MapplsIntouch.BEACON_PRIORITY_SLOW
MapplsIntouch.startTracking(MapplsIntouch.BEACON_PRIORITY_OPTIMAL);

Note: If no priority provided default will be used.

OR

MapplsIntouch.startTrackingWithCustomConfig({
  standByTimeInMins: 1,//mandatory
  timeWhileMovingInSec: 10,//mandatory
  enableRequestPermissionIfMissing:true
  autoTrackingConfig: {endTimeConfig: {hour:  7, minute:  58, amPm:  "pm"}}
  });
  • timeWhileMovingInSec:(number) tracking api hit time while moving in seconds.

  • standByTimeInMins:(number) tracking api hit time while standby in minutes.

Only for android Platform

  • enableRequestPermissionIfMissing(boolean) Location permissions will handle by SDK if set to true.Default value is true
  • autoTrackingConfig(object): To set auto tracking settings:
    • endTimeConfig(object): To set option to stop the tracking at time
      • hour(number): To set hours (1-12)
      • minute(number): To set minutes (0 - 59). Default value 0
      • second(number): To set seconds (0 - 59). Default is 0
      • amPm(String): am or pm. Default value is am

Step 6. Stop tracking

To stop your app user's phone live location tracking use the below mentioned method.

MapplsIntouch.stopTracking();

Step 7. Listen for tracking events

This method will be called when tracking starts, stops or some tracking error is caught.

MapplsIntouch.addTrackingStateListener((event) => {
if(event === 'onTrackingStart'){

}else if(event === 'onTrackingStop'){

}
},(error)=>{
console.log(error.message);
});

Step 8. Remove Listener

This method will remove TrackingStateListener. Call this method before Unmounting component.

MapplsIntouch.removeTrackingStateListener();

Step 9. getCurrentLocationUpdate

Updates single location on server and return to the user

try {
const  res= await  MapplsIntouch.getCurrentLocationUpdate();
//do something with response
} catch (e) {
//error log
}
  • optional parameter(Android) enableRequestPermissionIfMissing(boolean) Location permissions will be handled by SDK if set to true.Default value is true.

For any queries and support, please contact:

Email us at [email protected]

Support Need support? contact us!