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.
In this tutorial, we will create a React Native app with a simple use case that just does two things:
- Scan for nearby Bluetooth printers on Android or list the paired Bluetooth printers on iOS.
- 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.
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.
3.1 Add Link-OS SDK Library for Android to Android Project
- Open the Android project of ZSDKRCTDevDemo in Android Studio.
- Click on “Open an existing Android Studio project” or click on File -> Open, then navigate to the android folder and click on Open.
- Select the Project view in Android Studio and create a libs subfolder under app folder.
- 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.
- 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.
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
- Open ZSDKRCTDevDemo.xcworkspace in Xcode.
- Add a new folder called ZSDK and a subfolder called include under ZSDKRCTDevDemo folder in the Project navigator.
- 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.
- 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.
- 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.
- 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.
- 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.