Scanbot Barcode Scanner SDK Example Apps for React Native

These example apps demonstrate how to integrate the Scanbot Barcode Scanner SDK for React Native for Android and iOS.

What is the Scanbot Barcode Scanner SDK?

Scanbot Barcode Scanner SDK is a simple to use high level API, providing a collection of classes and functions for scanning and parsing 1D and 2D barcodes from your mobile device's camera or other image sources like your photo library.

The SDK for React Native is available as an npm package:

• https://www.npmjs.com/package/react-native-scanbot-barcode-scanner-sdk

Trial License

The Scanbot SDK will run without a license for one minute per session!

After the trial period has expired, all SDK functions and UI components will stop working. You have to restart the app to get another one-minute trial period.

To try the Scanbot SDK without a one-minute limit, you can get a free “no-strings-attached” trial license. Please submit the Trial License Form on our website.

Free Developer Support

We provide free "no-strings-attached" developer support for the implementation & testing of the Scanbot SDK. If you encounter technical issues with integrating the Scanbot SDK or need advice on choosing the appropriate framework or features, please visit our Support Page.

Supported Barcode Types

• 1D Barcodes: Codabar, Code 39, Code 93, Code 128, IATA 2 of 5, Industrial 2 of 5, ITF, EAN-8, EAN-13, MSI Plessey, RSS 14, RSS Expanded (Databar), UPC-A, UPC-E, Code 25, USPS Intelligent Mail, RM4SCC, Japan Post 4-State, Australia Post 4-State, KIX, RSS Limited (Databar), GS1 Composite.
• 2D Barcodes: Aztec, Data Matrix, PDF417, QR Code, Micro QR Code.

💡 Also check out our blog post Types of barcodes.

Supported Data Parsers:

• AAMVA: Parse the AAMVA data format from PDF-417 barcodes on US driver's licenses.
• Boarding pass data from PDF417 barcodes.
• Parser for German Medical Certificates (aka. Disability Certificate or AU-Bescheinigung) coded in a PDF-417 barcode.
• GS1 encoded data from barcodes.
• Data from PDF-417 barcodes on ID Cards.
• Parse and extract data from XML of Data Matrix barcodes on Medical Plans (German Medikationsplan).
• Data parser of QR-Code values printed on SEPA pay forms.
• vCard data from a QR-Code (e.g. on business cards).
• Swiss QR data from a QR-Code for easy, automatic and efficient payments.

For more details please refer to the SDK documentation.

Documentation

For more details about the Scanbot Barcode Scanner SDK for React Native please see this documentation.

How to run this app

Step 0: Install Command Line Tools

Note: Make sure you have completed the React Native - Environment Setup before proceeding.

Step 1: Install Dependencies

To install the project dependencies, run the following commands

# Install the required dependencies
yarn

# Install the iOS dependencies
cd ios 
bundle install
bundle exec pod install --repo-update
cd ..

Step 2: Start your Application

Plugin in your physical device via USB and run the following command to start your Android or iOS app:

For Android

yarn run android

or

npm run android

For iOS

Setup Environment, Provisioning and Signing settings:

• Starting from React Native version 0.69, the suggested approach is to configure the Xcode environment using the .xcode.env file. The .xcode.env file contains an environment variable to export the path to the node executable in the NODE_BINARY variable. Please make sure that you've set the path correctly. You can also set the path from the terminal:

cd ios
echo export NODE_BINARY=$(command -v node) > .xcode.env.local

• Open the workspace file ScanbotBarcodeExampleReact.xcworkspace (not .xcodeproj) from the ios directory in Xcode.
• Adjust Provisioning and Signing settings.

Then run:

yarn run ios

or

npm run android

If everything is set up correctly, you should see your new app running on your device.

This is not the only way to run your app — you can also run it directly from within Android Studio and Xcode respectively:

Using the new architecture

Scanbot Barcode SDK supports the new architecture. Here's how you can enable it in this app.

Android

Set newArchEnabled your android/gradle.properties file as true:

android/gradle.properties

newArchEnabled=true

iOS

Re-install the iOS dependencies by running the following commands:

cd ios
RCT_NEW_ARCH_ENABLED=1 bundle exec pod install --repo-update
cd ..

What else can go wrong?

Pod not found

pod repo update

Still at a loss? It is probably a cache issue

yarn run clean

• npm cache clean --force && watchman watch-del-all
• Restart metro server!