Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

react-native-tookan-tracker

1.1.4 • Public • Published

tookan-tracker-react-native

Sample project for implementing react-native-tookan-tracker module.

What is the use of this Package

React Native Tookan Tracker lets you add live location tracking to your mobile app via Tookan platform. This repo contains an example client app that has everything you need to get started in minutes. This repo written in JavaScript, checkout quickstart if your feel more comfortable with it.

Add and setup these packages to your project before adding react-native-tookan-tracker:

react-native-maps (install + link)

axios (install only)

sp-react-native-mqtt (install + link)
Note ->: After running react-native link sp-react-native-mqtt, Don't forget to add pod 'MQTTClient' in ios Pod file and the run pod install in ios.

@mapbox/polyline (install only)
Note: If you are using Tracking without UI then this library is not required.

Install

Install the library from npm:

$ npm install --save react-native-tookan-tracker

or

$ yarn add react-native-tookan-tracker

Usage

With UI

import {MapTracking} from 'react-native-tookan-tracker'

export default class testTracking extends Component {
render() {
return (
<MapTracking jobId=”1234567” userId= ”123”/>
);
}
}

Without UI

import {getSocketData} from 'react-native-tookan-tracker'

export default class testTracking extends Component {

getSocketData(your_jobId, your_user_id, data => {
console.log(data);
});
}

Props

Prop Type Default Note
jobId string (required) Tookan JobId that you want to track.
userId string (required) Tookan UserId.
mapKey string (required) Google Map Key
pathUpdateTimer Number(in milliseconds) 60000(60 sec) Time after which google direction hit will be called.
destinationIcon Image source Image source used for indicating the destination spot on a map.
pickupIcon Image source Image source used for indicating the pickup spot on a map.
deliveryIcon Image source Image source used for indicating the delivery spot on a map.
agentMarkerImage Image source Image source used for indicating the agent marker on a map.
anchorX Number 0.4 For adjusting the agent marker on x-axis.
anchorY Number 0.4 For adjusting the agent marker on y-axis.
getData function For getting raw data from sockets(with UI).

Methods:

getSocketData(jobId,userId,callback):

This method is used to getting the raw data from sockets for without UI tracking.

getSocketData(this.state.jobId, this.state.userId, data => {
console.log(data);
});

getETA (For Without UI):
This method is used to get ETA for job destination by inputing the start location and map key.

import {getSocketData,getETA} from 'react-native-tookan-tracker'

export default class testTracking extends Component {

getSocketData(your_jobId, your_user_id, data => {
console.log(data);
});

getETA(
{latitude: '30.6942713', longitude: '76.8792693'},
'goog_map_key',
data => {
console.log(data);
},
);
}

stopTracking():

This method is used to stop the tracking and disconnecting the sockets.



Npm Package Link react-native-tookan-tracker

Install

npm i react-native-tookan-tracker

DownloadsWeekly Downloads

27

Version

1.1.4

License

MIT

Unpacked Size

54.4 kB

Total Files

10

Last publish

Collaborators

  • avatar