Mapmyindia Intouch React Native SDK

Mapmyindia Intouch React Native SDK

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

MapmyIndia Intouch React Native SDK

Introduction

Get Real-Time Location Tracking for your apps with MapmyIndia 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. Learn how to Integrate the InTouch SDK

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 MapmyIndia 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 MapmyIndia 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 mapmyindia-intouch-react-native-sdk --save

  • If using React-native<0.60 react-native link mapmyindia-intouch-react-native-sdk

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.mapmyindia.com/repository/mapmyindia/'}

           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

}

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.m
#import  <BeaconSdkFramework/BeaconSdkFramework.h>

- (void)application:(UIApplication *)application performFetchWithCompletionHandler:(nonnull void (^)(UIBackgroundFetchResult))completionHandler
{
[Intouch.shared backgroundfetchWithCompletionHandler:completionHandler];
}
  • 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  MapmyIndiaIntouch  from  'mapmyindia-intouch-react-native-sdk';
Step 2. Check if Intouch SDK is already initialized
const  status = await  MapmyIndiaIntouch.isInitialized();
Step 3: Initialize Intouch SDK

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

MapmyIndiaIntouch.initialize(deviceName,clientId,clientSecret
(result) => {
if (result === 'success') {
console.log("success")
} else {
//error log
console.log(result)
});
Step 4: Check if Intouch SDK is already running
const  status = await  MapmyIndiaIntouch.isRunning()
Step 5. Start tracking

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

MapmyIndiaIntouch.startTracking();

You can start tracking using below three options

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

Note: If no priority provided default will be used.

OR
MapmyIndiaIntouch.startTrackingWithCustomConfig(timeWhileMovingInSec,standByTimeInMins);
  • timeWhileMovingInSec:(number) tracking api hit time while moving in seconds.
  • standByTimeInMins:(number) tracking api hit time while standby in minutes.
Step 6. Stop tracking

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

MapmyIndiaIntouch.stopTracking();
Step 7. Listen for tracking events

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

MapmyIndiaIntouch.addTrackingStateListener((event) => {
 switch(event) {  
    case 'onTrackingStart':  
     //Do something on tracking start
     break;  
    case 'onTrackingStop':  
     //Do something on tracking stop
     break;  
    default: 
    //Tracking errors
        }
});
Step 8. Remove Listener
MapmyIndiaIntouch.removeTrackingStateListener();

Email

Email us at [email protected]

Stack Overflow

Ask a question under the mapmyindia-api

Support

Need support? contact us!

Blog

Read about the latest updates & customer stories

Download Details:

Author: MapmyIndia

Source Code: https://github.com/MapmyIndia/mapmyindia-intouch-react-native-sdk

react-native react mobile-apps

What is Geek Coin

What is GeekCash, Geek Token

Best Visual Studio Code Themes of 2021

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

How native is React Native? | React Native vs Native App Development

Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.

React Native App Developers India, React Native App Development Company

Hire React Native app developers India from a preferred React Native app development company by innovative industry leaders. Let's Discuss Your Project.

React Native Mobile App Development

Skenix is providing React Native Development Services with qualified React Native App Developers. Get the best React Native App Development Services.

How React Native Is Shaping Mobile App Development

Are you a mobile app developer looking for more efficient tools for your projects? Mobile app development is getting tougher and tougher as the market continues to grow. As a developer, you need to develop Apps which meet the demands of your users. To achieve this, adopt the right tools, like the React Native development framework.

Top React Native Mobile App Development Companies in USA

Looking for top React Native mobile app development company in USA for Startups & Enterprise? Find out the top list of React Native mobile app development company in USA.