react-native-hailify v1.0.3
Hailify-React-Native-FleetSDK
Supported Platforms
Description
Hailify will provide you npm package which you can install using npm or yarn. Using that you can able to access DeliveryView and able to complete exclusive jobs within your app.
Step 1: Add Hailify package to your app
using yarn or npm package manager you can install react-native-hailify.
Execute the below command in the terminal to install this package.
yarn add react-native-hailify
//ord
npm install react-native-hailifyAndroid Installation
Add the following to your android/build.gradle:
under section allprojects/repositories
maven {
url 'https://hailifyfleet.jfrog.io/artifactory/hailifyfleet'
//Hailify will provide you username and password for downloading sdk
credentials{
username "USER_NAME"
password "PASSWORD"
}
}iOS Installation**
====================
Add the following to your
ios/Podfile:
use_frameworks!
# Note that if you have use_frameworks! enabled, Flipper will not work and
# you should disable the next line.
# use_flipper!()
#*~~~~~ set 'BUILD_LIBRARY_FOR_DISTRIBUTION' = 'YES' to all of your pods target ~~~~~*#
post_install do |installer|
react_native_post_install(installer)
installer.pods_project.targets.each do |target|
target.build_configurations.each do |config|
config.build_settings['BUILD_LIBRARY_FOR_DISTRIBUTION'] = 'YES'
end
end
end2. Run npx pod-install to install pods from your project folder.
Notes:- You need to add below permissions in Info.plist. Ignore if you have added already. You can set description as per usage.
In order to enable geolocation in the background, you need to include location as a background mode in the
Capabilitiestab in Xcode.
<key>NSLocationAlwaysAndWhenInUseUsageDescription</key>
<string>This app collects your location data to improve pickups & drop-offs delivery packages and to enhance safety. You can turn off location data anytime in your phone’s device.</string>
<key>NSLocationWhenInUseUsageDescription</key>
<string>This app collects your location data to improve pickups & drop-offs delivery packages and to enhance safety. You can turn off location data anytime in your phone’s device.</string>
<key>NSCameraUsageDescription</key>
<string>This app will use your camera to take pictures to confirm deliver packages.</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>This app will use your library to select delivery packages.</string>Step 2: Import Plugin
import * as Hailify from 'react-native-hailify';
Import plugin into your app.js file or where you want to access Hailify package.
Example:-
import * as Hailify from 'react-native-hailify-fleet';Step 3: Initialize SDK
Hailify.initialize( fleetName:<your_fleet_name>, fleetToken:<your_fleet_token>)
fleetName: Name of your company
fleetToken: Token which provided by hailify to you.
Example:
import * as Hailify from 'react-native-hailify-fleet';
Hailify.initialize(fleetName:'ABC',fleetToken:'kjsfhkjsdhf')Step 4: Set Driver ID
Hailify.setDriverId(driverId)
- driverId: ID of your driver who is registered with your organization.
e.g:
Hailify.setDriverId('xyz')Step 5: Open Order View
Hailify.showOrderPopup()
- The app should call this method once you get success response from the Assign Driver end-point(AssignBooking)
e.g:
Hailify.showOrderPopup()Sandbox Environment
Hailify.enableSandbox(true/false)
- By default it is
false - Enable sandbox environment in order to test orders.
e. g.:
Hailify.enableSandbox(true)
Location Engine
Hailify.useSDKLocationEngine(true/false)
- By default it is
false. - Allow Hailify SDK to use the SDK Location engine.
e.g.:
Hailify.useSDKLocationEngine(true)Or provide your location from your app to Hailify SDK by calling the below method.
Hailify.setLocation(latitude: number, longitude: number, accuracy: number)
e.g. :
Hailify.useSDKLocationEngine(false)
Hailify.setLocation(
latitude: 40.0,
longitude: -74.0,
accuracy: 5
)Initialize Delivery View
Hailify.initializeDeliveryView(callback)
- For adding the Delivery View inside your React Native application you have to call this method and after successful Initialize of Delivery view, you will get a success callback. then you can set other listeners which are related to the Delivery view. e.g.:
Hailify.initializeDeliveryView(()=>{
// All listners will be set here.
})Navigation Listener (Optional)
Hailify.setNavigationListener(callback)
- Customize navigation option for the current order. To fetch current order latitude & longitude, Add the following listener method. If this listener will not be defined then Hailify SDK opens a route from the current location to the Order location in Apple Maps or Google Maps based on what is installed in the device.
- This is an optional method.
Note: You have to set this listener after the successful initialization of the delivery view.
e.g:
...
...
Hailify.initializeDeliveryView(()=>{
Hailify.setNavigationListener((latitude, longitude)=>{
})
})
...
...Order Status Listener (Optional)
Hailify.setOrderStatusListener(callback)
- Define the following listener method If you want to get the updated status of the current order. This listener callback will call when the current order status will change. Possible values: Check Delivery Statuses
Note: You have to set this listener after the successful initialization of the delivery view.
e.g:
...
...
Hailify.initializeDeliveryView(()=>{
Hailify.setOrderStatusListener((status , deliveryID)=>{
})
})
...
...Order Complete Listener (Optional)
Hailify.setCompleteListener(callback)
- Following the listener method will call just after you will complete the current booking.
- This is an optional method.
Note: You have to set this listener after the successful initialization of the delivery view.
e.g:
...
...
Hailify.initializeDeliveryView(()=>{
Hailify.setCompleteListener(()=>{
})
})
...
...Call Listener (Optional)
Hailify.setCallListener(callback)
- Customize call option for the current order location(either pick-up or drop-off). Add the following listener method in order to get the phone number of the pick-up or drop-off location. If this method will not define then Hailify SDK calls the current order’s location from the device.
- This is an optional method.
Note: You have to set this listener after the successful initialization of the delivery view.
e.g:
...
...
Hailify.initializeDeliveryView(()=>{
Hailify.setCallListener((number)=>{
})
})
...
...Get Order Current Status (Optional)
Hailify.getCurrentOrderStatus()
- Get order current status at any time. Possible values: Check Delivery Statuses
e.g.:
...
...
const status = await Hailify.getCurrentOrderStatus();
...
...Quick Example
import React, {useEffect} from 'react';
import {StyleSheet, Text, View, ToastAndroid, Pressable} from 'react-native';
import * as Hailify from 'react-native-hailify-fleet';
const App = () => {
Hailify.initialize(
'FleetName',
'token',
);
Hailify.setDriverId('driverId');
Hailify.useSDKLocationEngine(true);
// Hailify.setLocation(44.225, 55.1111, 0.4);
useEffect(() => {
Hailify.enableSandbox(true);
Hailify.initializeDeliveryView(() => {
Hailify.setCallListener(phoneNumber => {
console.log(phoneNumber);
});
Hailify.setNavigationListener((latitude, longitude) => {
console.log(latitude + '' + longitude);
});
Hailify.setCompleteListener(() => {
console.log('Order Completed');
});
Hailify.setOrderStatusListener((orderId, orderStatus) => {
console.log('orderStatus ==> ' + orderStatus + ' orderId ====>' + orderId);
});
});
}, []);
return (
<View style={{flex: 1, backgroundColor: 'white'}}>
<Pressable
onPress={async () => {
const status = await Hailify.getCurrentOrderStatus();
console.log('status ==>' + status.toString());
}}>
<Text style={{fontSize: 60, color: 'green'}}>Your App Here.</Text>
</Pressable>
</View>
);
};