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’d rather use a local package, download it directly from the barKoder Developer Portal. After extracting the archive, add it to your project by specifying the path to the package using:

                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 encounter issues on iOS, try reinstalling the dependencies:Navigate to the ios folder of your project and run:

                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 stage, the barkoder-react-native package is successfully installed and imported into your project.The next step is to integrate the BarkoderView component into your layout, making sure to:

  • Set the licenseKey parameter.
  • Provide the onBarkoderViewCreated callback to handle initialization events.
                <SafeAreaView style={styles.container}>
   ...

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

   ...
            

The license key is an alphanumeric string required to activate the SDK. Refer to Section 7 for detailed instructions on obtaining 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 #

The SDK requires camera permission to enable barcode scanning features.

  • Android: The required permission is automatically declared in the package manifest. No additional configuration is needed.
  • iOS: You must manually specify the camera permission in your project’s Info.plist file by adding a NSCameraUsageDescription key with a description of why the camera is needed.
                <key>NSCameraUsageDescription</key>
 <string>Camera permission</string>
            

7. Licensing #

The SDK will scan barcodes even without a license, but results will come with an "UNLICENSED" prefix.  
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.

Page Contents

History:

close