Developing React Native Applications on Zebra Devices

React Native is a cross platform mobile application development framework, it is an open source project promoted by Facebook and launched back in 2015 based on the React architecture and allows developers to create native-feeling applications in JavaScript.  React Native is distinct from so-called “hybrid frameworks” such as Ionic or Cordova; whereas the latter render the application within a WebView, React Native applications are truly native (sometimes called hybrid-native) applications which can arguably lead to performance improvements over the hybrid approach, particularly in regards to user experience.

The benefits and drawbacks of hybrid frameworks and whether frameworks like NativeScript or React Native are truly native or not are well documented on the web and are outside the scope of this post.  We have found that most developers choose to develop apps in a way that aligns with their skillset – Java developers will create native Android applications; C# developers will gravitate towards Xamarin and JavaScript developers have a lot of choice when choosing a framework.  The officially support JavaScript development “framework” for Zebra devices is Enterprise Browser but many JavaScript developers would prefer to use the JavaScript framework they are most familiar with.  Over the past year or so we have created advice for Ionic developers and Cordova developers but we have never published anything beyond those two.

React Native has been an occasional request from our customers.  To gauge interest back in August 2016 I posted an npm module and proof of concept to show how developers could integrate React Native with DataWedge.  Although that npm module is not supported by Zebra, it does get about 150-200 downloads a month so I thought it made sense to walk through how a more complex application could be put together, taking advantage of the recent improvements to the DataWedge API.

DataWedge Intent Interface

DataWedge is a value-add of all Zebra Technologies mobile devices that allows barcode capture and configuration without the need to write any code.  This application will demonstrate how to use Android intents to add DataWedge scanning functionality to your application

The React Native DataWedge Module

To interact with the DataWedge service (to control the scanner) we need to add a React module capable of handling Android Intents.  Although there are several React native modules that deal with Intents, I could not find one that offers the flexibility we need so I went ahead and created one and released it on npm under MIT license.  I recently updated the module to be able to handle the more recent DataWedge API calls and the application discussed later in this post describes how the module can be used.

The React Native DataWedge Module is not officially supported by Zebra - it is provided as-is

The Code

If you look at the documentation for the module, you will notice that two demo applications are discussed.  The old RNDataWedgeIntentDemo application was created back in August 2016 as an initial proof of concept but this post will only consider the newer DataWedgeReactNative application, created to take advantage of the newer DataWedge API.

Responses from the DataWedge API, for example, the response to the request to ‘get_active_profile’ are received as Broadcast intents so this demo will use broadcast intents to both interact with the DataWedge API and received scanned barcode data. Set up the broadcast receiver as follows:

import DataWedgeIntents from 'react-native-datawedge-intents'
...
//  Register a receiver for the barcode scans with the appropriate action
DataWedgeIntents.registerBroadcastReceiver({
  filterActions: [
      'com.zebra.reactnativedemo.ACTION',
      'com.symbol.datawedge.api.RESULT_ACTION'
  ],
  filterCategories: [
      'android.intent.category.DEFAULT'
  ]
});
...
//  Declare a handler for broadcast intents
this.broadcastReceiverHandler = (intent) =>
{
  this.broadcastReceiver(intent);
}

DataWedge needs to be configured to send intents to our broadcast receiver.  DataWedge configuration is profile-based; profiles are associated with an application or activity and when the specified app or activity comes to the foreground the associated profile configuration is applied.

There are three steps to configure DataWedge:

1. Create & configure a DataWedge profile
2. Associate the created profile with the React Native application
3. Configure the profile to send broadcast intents when a barcode is scanned

The manual steps (with screenshots) are detailed in the sample project’s setup instructions but it is far more convenient for both yourself and device administrators to configure the device in code:

If you run the demo application on a device with a sufficiently high version of DataWedge, these steps will be performed automatically

1. Create a DataWedge profile

This is achieved with the CREATE_PROFILE_API (requires DW 6.3+)

sendCommand(extraName, extraValue) {
  console.log("Sending Command: " + extraName + ", " + JSON.stringify(extraValue));
  var broadcastExtras = {};
  broadcastExtras[extraName] = extraValue;
  DataWedgeIntents.sendBroadcastWithExtras({
    action: "com.symbol.datawedge.api.ACTION",
    extras: broadcastExtras});
}
this.sendCommand("com.symbol.datawedge.api.CREATE_PROFILE", "ZebraReactNativeDemo");

2. Associate the created profile with the React Native application

This is achieved with the SET_CONFIG API (requires DW 6.4+)

var profileConfig = {
  "PROFILE_NAME": "ZebraReactNativeDemo",
  "PROFILE_ENABLED": "true",
  "CONFIG_MODE": "UPDATE",
  "PLUGIN_CONFIG": {
    "PLUGIN_NAME": "BARCODE",
    "RESET_CONFIG": "true",
    "PARAM_LIST": {}
  },
  "APP_LIST": [{
    "PACKAGE_NAME": "com.datawedgereactnative.demo",
    "ACTIVITY_LIST": ["*"]
  }]
};
this.sendCommand("com.symbol.datawedge.api.SET_CONFIG", profileConfig);

3. Configure the profile to send broadcast intents when a barcode is scanned.

Again, this is achieved with the SET_CONFIG API (requires DW 6.4+)

var profileConfig2 = {
  "PROFILE_NAME": "ZebraReactNativeDemo",
  "PROFILE_ENABLED": "true",
  "CONFIG_MODE": "UPDATE",
  "PLUGIN_CONFIG": {
    "PLUGIN_NAME": "INTENT",
    "RESET_CONFIG": "true",
    "PARAM_LIST": {
      "intent_output_enabled": "true",
      "intent_action": "com.zebra.reactnativedemo.ACTION",
      "intent_delivery": "2"
    }
  }
};
this.sendCommand("com.symbol.datawedge.api.SET_CONFIG", profileConfig2);

Putting this all together, you now have an application that will receive scan data from the default device scanner without having to perform any special scanner control logic or write any native code.

So far, we have shown the DataWedge API being used to create a profile and configure the scanner.  There are far more APIs available.  For example, if you wanted to swtich from the default imager scanner to a connected Bluetooth scanner, you could use the SWITCH_SCANNER API (DW 6.5+)

//  re-using the sendCommand() function defined earlier
//  assuming 3 is the index of the BT scanner returned from the call to enumerate scanners
this.sendCommand("com.symbol.datawedge.api.SWITCH_SCANNER", "3"); 

Demo Application

I have put together a basic demo application at https://github.com/darryncampbell/DataWedgeReactNative that enables you to scan barcodes, see the application status and configure the decoders in use.

The application will work on any Zebra mobile computer running Android that supports the DataWedge service (excepting the CC5500 device).  Depending on the version of DataWedge running on your device, some features might not be available to you, but all devices support scanning and capturing barcode data at a minimum. Please see the demo readme file for more information and setup including how to manually configure DataWedge on older devices.

Building and Running the Demo Application

• Install React Native
• git clone https://github.com/darryncampbell/DataWedgeReactNative.git
• cd DataWedgeReactNative
• npm install
• Follow the React Native instructions for running on a physical device
• Connect Zebra device to adb
• react-native run-android
• Debug any connection issues

Please raise any issues with the demo app in GitHub.