React Native Installation

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:

Before you start #

Prepare environment #

Install the dependencies and setup your environment

1. Add the package #

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.

Add package from npm #

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.

Add package from a local folder #

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.

For iOS, install the native dependencies by running the following commands from your project root:

cd ios
pod install
cd ..

Import package #

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

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

2. Allow the camera #

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>

3. Add the scanner view #

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.

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

The license key is an alphanumeric string required to activate the SDK. Refer to Section 7 for detailed instructions on obtaining a valid license.

4. Set the license key and barcode types #

Licensing #

5. Start scanning and read results #

Ready to Scan Event #

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

Add the following state and handlers inside your function component, before its return, in a TSX file.

const [barkoder, setBarkoder] = React.useState<Barkoder | null>(null);

function onBarkoderViewCreated(_barkoder: Barkoder) {
  _barkoder.setBarcodeTypeEnabled(Barkoder.BarcodeType.qr, true);
  _barkoder.setRegionOfInterestVisible(true);
  setBarkoder(_barkoder);
}

function scanPressed() {
  if (!barkoder) return;

  barkoder.startScanning((result) => {
    // Handle the scan result here.
  });
}