Sign UpDashboardIQLReact Native

Getting Started

React Native (RN) is an open source framework used for building Android and iOS applications, by leveraging the application platform's native abilities along with React. React Native uses JavaScript to access your application platform’s APIs and to describe UI functions using React bundles of reusable, nestable code.

RN can be used to build an application from scratch, and also to add a single view or user flow to existing native applications. Here, we talk about how to integrate Zendrive SDK with your RN application.

Prerequisites

To use Zendrive SDK, you will need a Zendrive SDK Key. Refer to the following documentation to know more:

Initialize Zendrive SDK

Your application should now be able to compile both on Android and iOS, without incurring any build issues.

To use zendrive API in your JavaScript files, import it as shown below: 

import Zendrive from 'react-native-zendrive';

Most calls to the zendrive API are promise-based, which means that for proper results, you need chain a then and catch or use async-await calls.

// in your business logic, typically after login, you use login identity to setup zendrive
Zendrive.setup({
  driverId: '<your-driver-id>',
  sdkKey: '<your-sdk-key>',
}).then(result => {
  console.log(result);
});

For other set up options, see ZendriveConfiguration.

Register Event Listener

Zendrive SDK allows your application to receive callbacks of events detected within the SDK. To listen to these events you need to register an event listener. We recommend that the event listener be added as soon as yourJavaScript gets initiazed, which typically happens in your index.js, which is present in your application's root directory.

import { AppRegistry } from 'react-native';
import App from './App';
import { name as appName } from './app.json';
// import zendrive
import Zendrive from 'react-native-zendrive';
// ensure to register as soon as possible
Zendrive.registerZendriveCallbackEventListener(payload => {
  switch (payload.kind) {
    case 'on-drive-start':
      // handle drive start event, refer ZendriveOnDriveStartEvent
      console.log(payload.event);
      break;
    case 'on-drive-resume':
      // handle drive resume event, refer ZendriveOnDriveResumeEvent
      console.log(payload.event);
      break;
    case 'on-drive-end':
      // handle drive end event, refer ZendriveOnDriveEndEvent
      console.log(payload.event);
      break;
    case 'on-drive-analyzed':
      // handle drive analyzed event, refer ZendriveOnDriveAnalyzedEvent
      console.log(payload.event);
      break;
    case 'on-potential-accident':
      // handle 'on-potential-accident event, refer ZendriveOnPotentialAccidentEvent
      console.log(payload.event);
      break;
    case 'on-accident':
      // handle on-accident event, refer ZendriveOnAccidentEvent
      console.log(payload.event);
      break;
    case 'on-settings-changed':
      // handle settings changed event, refer ZendriveOnSettingsChangedEvent
      console.log(payload.event);
      break;
    case 'on-boot-completed':
      // this is android only
      // handle boot completed event, refer ZendriveOnBootCompleted
      console.log(payload.event);
      break;
    case 'on-my-package-replaced':
      // this is android only
      // handle package replaced event, refer ZendriveOnMyPackageReplaced
      console.log(payload.event);
      break;
    case 'on-location-approved':
      // DEPRECATED
      // this is ios only
      // handle location approved event, refer ZendriveOnLocationApprovedEvent
      console.log(payload.event);
      break;
    case 'on-location-denied':
      // DEPRECATED
      // this is ios only
      // handle location denied event, refer ZendriveOnLocationDeniedEvent
      console.log(payload.event);
      break;
    case 'on-activity-approved':
      // DEPRECATED
      // this is ios only
      // handle location approved event, refer ZendriveOnActivityApprovedEvent
      console.log(payload.event);
      break;
    case 'on-activity-denied':
      // DEPRECATED
      // this is ios only
      // handle location denied event, refer ZendriveOnActivityDeniedEvent
      console.log(payload.event);
      break;
  }
});
AppRegistry.registerComponent(appName, () => App);

Check for Settings Errors and Warnings

Zendrive SDK reports errors and warnings are of the on-settings-changed event type. This event is notified immediately after the SDK is set up, and again whenever there is a setting change that affects either trip detection or the normal functioning of Zendrive SDK.

The following errors can show up:

  • If the errorsFound flag is true, it indicates that the SDK has detected setting errors that will affect trip detection. These must be resolved by the application before trip detection can resume.

  • If the warningsFound flag is true, it indicates that the SDK has detected warnings. This will cause the SDK to operate in a degraded mode. For the SDK to function optimally, these warnings should be displayed to the user for resolution.

Also, the application should call Zendrive.getZendriveSettings to get the list of errors and warnings that must be resolved.

Once all errors and warnings are resolved, Zendrive SDK will send an onZendriveSettingsConfigChanged callback with both errorsFound and warningsFound set to false that signals that the SDK has resumed functioning correctly.

The following snippets demonstrate one way of handling this event:

Zendrive.registerZendriveCallbackEventListener(notifiedEvent => {
  switch (notifiedEvent.kind) {
    case 'on-settings-changed':
      const event = notifiedEvent.event;
      // assuming that you have state 'store'
      store.setZendriveErrorsFound(event.errorsFound);
      store.setZendriveWarningsFound(event.warningsFound);
      break;
    // ..other cases
  }
});
// somewhere in the in your application logic in UI
// assuming that you have state 'store'
const errorsFound = store.getZendriveErrorsFound();
const warningsFound = store.getZendriveWarningsFound();
if (errorsFound || warningsFound) {
  Zendrive.getZendriveSettings().then(settings => {
    if (settings) {
      // handle errors, show in UI and resolve them
      settings.errors.forEach(err => {
        switch (err.type) {
          case 'background-restriction-enabled':
            break;
          case 'google-play-connection-error':
            break;
          case 'google-play-settings-error':
            break;
          case 'location-permission-denied':
            break;
          case 'location-settings-error':
            break;
          case 'power-saver-mode-enabled':
            break;
          case 'wifi-scanning-disabled':
            break;
          case 'activity-recognition-permission-denied':
            break;
          case 'overlay-permission-denied':
            break;
          case 'airplane-mode-enabled':
            break;
          case 'bluetooth-disabled':
            break;
        }
      });
      // handle warnings, show in UI and resolve them
      settings.warnings.forEach(warning => {
        switch (warning.type) {
          case 'background-restriction-enabled':
            break;
          case 'google-play-connection-error':
            break;
          case 'google-play-settings-error':
            break;
          case 'location-permission-denied':
            break;
          case 'location-settings-error':
            break;
          case 'power-saver-mode-enabled':
            break;
          case 'wifi-scanning-disabled':
            break;
          case 'activity-recognition-permission-denied':
            break;
          case 'overlay-permission-denied':
            break;
        }
      });
    } else {
      // if SDK is not setup, this value is null/undefined
    }
  });
}

For more information on the different errors and warnings, see ZendriveIssueType.

Disable Zendrive SDK

Invoke the teardown method to disable Zendrive SDK. Zendrive SDK goes completely silent after this call and does not track any driving behaviour until re-initialized. Use teardown in appropriate use cases, such as when your user logs out of the application. See Best Practices and FAQ for more information.

Zendrive.teardown().then(response => {
  console.log(response);
});

Next Steps

Once you complete the above, your application is integrated with Zendrive SDK. Your next steps will be:

  1. Use our Android SDK Testing Framework to create a mock drive and collect data.

  2. Install the application on your phone and go for a drive to collect real-world data.

  3. Launch theanalytics API and analyze the data you've collected.

  4. Look at our Features and Modifications page to see how you can customize Zendrive SDK for your needs.

NextReact Native Releases

Last updated

Was this helpful?