1. Vision SDK
  2. React Native

Vision SDK

React Native

Overview

Barcode and QR Code scanner framework for support in react-native(can be used with both iOS and Android). VisionSDK provides a way to detect barcodes and qr codes. It also provides the functionality for information extraction from different kind of logistic labels like shipping labels, inventory labels, bill of ladings, receipts & invoices

Installation

Install the SDK your preferred package manager like npm, yarn, or pnpm

yarn add react-native-vision-sdk
npm install --save react-native-vision-sdk

Permissions

To use the camera,

  1. On Android you need to ask for camera permission:
         <uses-permission android:name="android.permission.CAMERA" />
  1. On iOS, you need to update Info.plist with a usage description for camera
        <key>NSCameraUsageDescription</key>
<string>Your own description of the purpose</string>

IOS Development Requirements

• iOS 13.0+ • Swift: 5.4.2 • Xcode Version: 13.0

Setup

        import React, { useEffect, useRef } from "react";
import VisionSdkView from "react-native-vision-sdk";
const ScannerView = () => {
  const visionSdk = useRef(null);
  return (
    <VisionSdkView
      refProp={visionSdk}
      OCRScanHandler={(value) => console.log("on OCR Detected", value)}
      OnDetectedHandler={(value) => {
        console.log("Detected Barcode =", value.nativeEvent ? value.nativeEvent.barCode : value.barcode);
        console.log("Detected Text =", value.nativeEvent ? value.nativeEvent.text : value.text);
      }}
    />
  );
};

Initialization

In order to use the OCR API, you have to set apiKey to your API key. Also, you also need to specify the API environment that you have the API key for. Please note that these have to be set before using the API call. You can generate your own API key on our platform. You can find the instruction guide here.

        useEffect (() => {
  visionSdk.current.changeModeHandler({
    mode, // scanning mode like ocr, barcode, qrcode
    apiKey // your api key
    locationId // your location id if you have
  },[])
})

Capture Image

You can capture an image when mode is OCR. In OCR mode when capture is called, then in the callback, it will return an image.

        visionSdk.current.cameraCaptureHandler();

Close Camera

Stops camera session and scanning.

        visionSdk.current.stopRunningHandler();

Props

refProp
Set reference for vision sdk to manipulate modes or to access callback functions

mode
The type of scan you would like to perform. Options include barCode, qrCode, and ocr

  • barCode - Detects barcodes only in this mode.
  • qrCode - Detects qr codes only in this mode.
  • ocr - Use this mode to capture photos for later user in OCR API call.

captureMode
Default captureMode in ‘auto’, you can either use ‘manual’

locationId
The PackageX location ID for this scan. If your API key is scoped to a location, you can find the location ID on the key.

environment
The PackageX environment that is being used. sandbox or production

The callback will be called with a response object

The Response Object

OCRScanHandler
Return ocr detected data

onDetectedHandler
Return the detected data for ‘barcode’ and ‘text’

onBarCodeScanHandler
Return the detected data for barcode

onError
Description of the error, use it for debug purpose only

onImageCaptured
whenever image is capture in OCR mode

ErrorCode
Description camera_unavailable camera not available on device

permission
Permission not satisfied

others
other errors (check errorMessage for description)

In the callbacks, success or error response will be returned. It returns with the OCR Response from PackageX Platform API Response.

Previous <- Android