Skip to main content

React Native SDK

This SDK has been deprecated

The Datalogic React Native SDK has been deprecated and will no longer be updated.

Distribution

The Datalogic React Native SDK is distributed using npm. More information can be found below.

Overview​

The Datalogic React Native SDK Library that exposes the Datalogic Android SDK as a React Native module. It lets you receive barcode data from the scanner, as well as configure various scanner and device settings. It is available as a npm package for easy consumption here: @datalogic/react-native-datalogic-module.

Installation​

You can use the plugin with either yarn or npm, just make sure that the method is consistent across your project.

You can install the plugin using yarn as follows:

yarn add @datalogic/react-native-datalogic-module

You can install the plugin from the npm registry as follows:

npm i @datalogic/react-native-datalogic-module

How can I create a React Native app that uses the Datalogic module?​

Here's directions to create an app using React Native that can receive barcode data, starting from scratch, without React Native already installed.

Prepare your development environment for React Native​

Visit https://reactnative.dev/docs/environment-setup and set up your React Native environment.

WARNING: If you plan on using Expo, take note that the managed workflow does NOT work with the React Native Datalogic module. Use either the 'React Native CLI Quickstart', or make sure you select the bare workflow option if using Expo.

Add datalogic module​

yarn add @datalogic/react-native-datalogic-module

Add barcode handling code​

Open App.js. Add this line after your last import:

import { BarcodeManager } from '@datalogic/react-native-datalogic-module';
import { Alert, NativeEventEmitter } from 'react-native';

Next, add the following useEffect() method before your return:

React.useEffect(() => {
  try {
    const eventEmitter = new NativeEventEmitter(BarcodeManager);
    eventEmitter.addListener('successCallback', map => {
      Alert.alert('Barcode Result', map.barcodeData + '\n' + map.barcodeType);
    });
    BarcodeManager.addReadListener();
  } catch (e) {
    console.error(e);
  }
}, []);

Try scanning a barcode! A popup should show the barcode data and type. Start customizing your app to your liking. 🎉

Start app on device​

yarn react-native run-android

How can I create an APK of my application?​

When you've finished your app, heres how to create the AAB (Android App Bundle) and APK files.

Create the AAB​

cd android
./gradlew bundleRelease

This will create the app-release.aab file which is now ready to be uploaded to Google Play. If you want to access the APK to use on other platforms, you will need to follow a few more steps to extract it from the AAB file.

Create the APK​

Download Google bundletool and run the following command:

java -jar bundletool.jar build-apks --bundle=/MyApp/my_app.aab --output=/MyApp/my_app.apks --mode=universal

Change the file name from .apks to .zip. Inside, the universal.apk file is your app.