Since its release in 2015, React Native has become one of the popular cross-platform mobile development frameworks used to build thousands of mobile apps. Often, we have developers asking about how to integrate the Link-OS SDK with a React Native app for label printing on Zebra printers. In this tutorial, we will walk through the steps of how to add the Link-OS SDK into a React Native project for Android and iOS, so that the React Native app can perform label printing through the native API in the Link-OS SDK.

As we know, React Native is written entirely in JavaScript, while the Link-OS SDK libraries are written in Java for Android and written in Objective-C for iOS. Is it possible to call Java or Objective-C native methods from React Native? Thanks to the Native Module system provided in React Native framework, the answer is yes. The Native Module system in React Native framework allows us to expose instances of Java or Objective-C classes to JavaScript as JS objects, therefore we can call and execute the native methods from JavaScript. We will demonstrate the steps of how to expose the native methods that are based on the Link-OS SDK libraries through the Native Module system.

In this tutorial, we will create a React Native app with a simple use case that just does two things:

  1. Scan for nearby Bluetooth printers on Android or list the paired Bluetooth printers on iOS.
  2. Print a test label when tapping on a printer on the list.

The source code for this tutorial can be downloaded from ZSDKRCTDevDemo on GitHub.

1. Environment Setup

The environment setup for React Native is well documented. Simply follow the instructions in the Environment Setup doc to set up the development environment.If you  have the latest Android Studio and Xcode installed on a MacBook, you can add the Link-OS SDK into a React Native project and expose the native methods through the Native Module system for both Android and iOS on the same MacBook.

2. Create a React Native App

Once the environment setup is complete, you can go ahead to create a new React Native app. Open a terminal, go to a folder where you want the app to reside, and launch the following CLI command to create an app called ZSDKRCTDevDemo. It may take a few minutes for the CLI to complete, as it will create the folder structure and set up dependencies.

npx react-native init ZSDKRCTDevDemo

After ZSDKRCTDevDemo is created, you will get the following folder structure with the android and ios subfolders, where the corresponding projects for Android Studio and Xcode are located respectively. The the Link-OS SDK libraries for Android and iOS will be added into the android and ios subfolders respectively. The native Java and Objective-C methods for label printing will be created and exposed through the Native Module system from these two subfolders respectively as well.

Graphical user interface, application</p>
<p>Description automatically generated

3. Add Link-OS SDK Libraries

Download and install Link-OS Multiplatform SDK, if you have not done so. In the root directory (link_os_sdk) of the installed SDK, you will see the following folder structure, where you can find the corresponding the Link-OS SDK libraries for Android and iOS under their respective lib fodders. You need to add the libraries to Android project and iOS project separately.

Graphical user interface, application</p>
<p>Description automatically generated                        Graphical user interface</p>
<p>Description automatically generated with medium confidence

3.1 Add Link-OS SDK Library for Android to Android Project

  1. Open the Android project of ZSDKRCTDevDemo in Android Studio.
  2. Click on “Open an existing Android Studio project” or click on File -> Open, then navigate to the android folder and click on Open.
  3. Select the Project view in Android Studio and create a libs subfolder under app folder.
  4. Copy and paste ZSDK_Android_API.jar file into the libs folder.

Note: Do not copy and paste the other *.jar files (in the same folder) that come with ZSDK_Android_API.jar in the same folder to the ZSDKRCTDevDemo project. Adding those*.jar files will cause the duplicate definition errors, because the ZSDKRCTDevDemo project already has those *.jar files added in during the project creation through the CLI command.

  1. Right click on ZSDK_Android_API.jar in the Project view and select “Add As Library …” option, then navigate to the libs folder where you just copied the ZSDK_Android_API.jar into, and click on OK.

Now, the library of the Link-OS SDK for Android is added to the Android project of ZSDKRCTDevDemo.

Graphical user interface, application</p>
<p>Description automatically generated

Note: Since this tutorial will use Bluetooth and Bluetooth scanning, the following three permissions need to be added in the AndroidManifest.xml.

<uses-permission android:name="android.permission.BLUETOOTH"/>
<uses-permission android:name="android.permission.BLUETOOTH_ADMIN"/>
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>

3.2 Add Link-OS SDK Library for iOS to iOS Project

  1. Open ZSDKRCTDevDemo.xcworkspace in Xcode.
  2. Add a new folder called ZSDK and a subfolder called include under ZSDKRCTDevDemo folder in the Project navigator.
  3. Copy and paste the libZSDK_API.a into ZSDK folder. Copy and paste all the other header files (*.h) in the include folder in the SDK into the newly created include subfolder. This can also be done through the drag and drop.
  4. Right click on ZSDK folder in the Project navigator and select “Add Files to “ZSDKRCTDevDemo”…” option. Then navigate to ZSDK folder where we just copied the library files into and select libZSDK_API.a, and then click on Add.
  5. Repeat the step 4 above for the header files.

Now, the library and its header files of the Link-OS SDK for iOS are added to the iOS project of ZSDKRCTDevDemo, as shown in the screenshots below.

Graphical user interface, application</p>
<p>Description automatically generated                       A picture containing graphical user interface</p>
<p>Description automatically generated

Note:

  1. The ExternalAccessory.framework needs to be added to the iOS project, because the Link-OS SDK for iOS is based on this framework for Bluetooth connection.
  2. In addition, the com.zebra.rawport protocol string needs to be added to the info.plist under the “Supported external accessory protocols” field. This is required by Apple MFi for connecting Bluetooth on Zebra printers.

The following two screenshots show where and how they can be added.

Graphical user interface, text, application</p>
<p>Description automatically generated