bumble-react-sdk v1.0.5
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). |
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