Sample project for implementing tookan-tracker-react-native-sdk module.
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 tookan-tracker-react-native-sdk:
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 the library from npm:
$ npm install --save tookan-tracker-react-native-sdk
or
$ yarn add tookan-tracker-react-native-sdk
With UI
import {MapTracking} from 'tookan-tracker-react-native-sdk'
export default class testTracking extends Component {
render() {
return (
<MapTracking jobId=”1234567” userId= ”123” polylineColor= ”pink” mapKey="Flightmap or Google Keys" mapType=1/>
);
}
}
Without UI
import {getSocketData} from 'tookan-tracker-react-native-sdk'
export default class testTracking extends Component {
getSocketData(your_jobId, your_user_id, data => {
console.log(data);
});
}
| Prop | Type | Default | Note |
|---|---|---|---|
jobId |
string (required) |
Tookan JobId that you want to track. | |
userId |
string (required) |
Tookan UserId. | |
mapType |
number (required) |
For Googlemap = 1 and For Flightmap = 2. | |
rateSubmitActionStyle |
{{backgroundColor: 'red'}} | To change style of Submit action on Rate UI set this prop | |
rateAlertTitle |
string (optional) |
To set title on Alert after Rating done | |
rateAlertMessage |
string (optional) |
To set message body on Alert PopUp after Rating | |
rateAlertOkTitle |
string (optional) |
To set Ok title on Alert PopUp after Rating | |
isRateEnableInApp |
Boolean (optional) |
To Enable Rating | |
rateCommentPlaceholder |
string (optional) |
Rate Comment Placeholder | |
rateSubmitActionTitle |
string (optional) |
Rate Submit Action Button | |
mapKey |
string (required) |
Google Map Key or Flightmap Key depend on mapType | |
polylineColor |
string (required) |
Polyling Color | |
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). |
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 'tookan-tracker-react-native-sdk'
export default class testTracking extends Component {
getSocketData(your_jobId, your_user_id, data => {
console.log(data);
});
getETA(
{latitude: '30.6942713', longitude: '76.8792693'},
'google_map_key or flightmap key depend on mapType',
'mapType',
data => {
console.log(data);
},
);
}
stopTracking():
This method is used to stop the tracking and disconnecting the sockets.
Npm Package Link tookan-tracker-react-native-sdk