Installation Guide for barKoder's React Barcode Reader SDK

This is a guide for the barKoder React Native Plugin. Follow these simple steps below to use the barkoder-react-native package in your React project:

1. Prepare environment #

Install the dependencies and setup your environment

2. Add our barkoder-react-native package #

To add the barkoder-react-native package to your project, you have two options. You can either use the barkoder-react-native package from npm or from a local path.

To use the package from npm run this command:

                yarn add barkoder-react-native
            

if you are using YARN in your project or

                npm install barkoder-react-native
            

if you are using NPM in your project.

If you prefer to use a local package, download the package from https://barkoder.com, unzip the archive and add the package with setting the package path

                yarn add <path to barkoder-react-native package>
            

if you are using YARN in your project or

                npm install <path to barkoder-react-native package>
            

if you are using NPM in your project.

If you are having trouble with iOS, try to reinstall the dependencies by running pod install command inside ios folder:

                cd ios
pod install
            

3. Import package #

Import the barkoder-react-native package in your project with:

                import { Barkoder, BarkoderView } from 'barkoder-react-native';
            

4. BarkoderView #

At this point the barkoder-react-native package is installed and imported in your project. Next step is to add the BarkoderView in your layout and set the licenseKey parameter and onBarkoderViewCreated callback.

                <SafeAreaView style={styles.container}>
   ...

   <BarkoderView
       style={styles.barkoderView}
       licenseKey="KEY"
      > onBarkoderViewCreated(barkoder)} />

   ...
            

The license key is a string that consists of alphanumerical characters. See Section 7 to learn how to get a valid license.

5. Ready to Scan Event #

Inside onBarkoderViewCreated callback function the SDK is fully initialized and ready for configuration or to start the scanning process

                async function onBarkoderViewCreated(_barkoder: Barkoder) {

  barkoder.setBarcodeTypeEnabled(Barkoder.BarcodeType.qr, true);
  barkoder.setRegionOfInterestVisible(true);

  ...

  setBarkoder(barkoder);
}

function scanPressed() {
  barkoder.startScanning((result) {
    // The result from successful scan is received here
  });
}
            

For the complete usage of the barkoder-react-native package please check our sample.

6. Camera permissions #

Our SDK requires camera permission to be granted in order to use scanning features. For Android, the permission is set in the manifest from the package. For iOS you need to specify camera permission in Info.plist file inside your project

                <key>NSCameraUsageDescription</key>
 <string>Camera permission</string>
            

7. Licensing #

The SDK will scan barcodes even without a valid license; however all results will be randomly masked with (*) Asterisk characters. By using our software you are agreeing to our End User License Agreement. To obtain a valid license, one should create an account here and either get a trial license (to test the software out) or procure a production license that can be used within a live app.

8. Note: React version 0.75+ #

How to disable the default setting#

1. Open the android/gradle.properties file
2. Toggle the newArchEnabled flag from true to false

gradle.properties

                # Use this property to enable support to the new architecture.
# This will allow you to use TurboModules and the Fabric render in
# your application. You should enable this flag either if you want
# to write custom TurboModules/Fabric components OR use libraries that
# are providing them.
-newArchEnabled=true
+newArchEnabled=false