React Native

Setup

The react-native based Vision SDK is an on-device computer vision and NLP based toolkit designed to scan barcodes, QR codes, and extract structured information from logistics documents such as shipping labels, bills of lading (BOLs), and inventory/item labels. Built for real-time performance, it enables fast, offline processing without relying on cloud services. The SDK also supports advanced use cases including item retrieval, price tag extraction, and item counting, making it ideal for warehouse, retail, and logistics applications. With a focus on accuracy, speed, and device-level intelligence, the Vision SDK empowers developers to build seamless and efficient vision-based workflows directly on mobile and embedded devices.

# Development Requirements

• react-native: 0.73.0+
• react: 18.0.0+
• node: 18.0.0+
• expo sdk: 50+

# iOS

• iOS: 16.0+
• Swift: 5.7+
• Xcode: 13.0+

# Android

• minSdkVersion: 29
• compileSdkVersion: 35
• targetSdkVersion: 35
• kotlinVersion: 1.9.0+
• buildToolsVersion: "35.0.0"

# Installation

        npm install react-native-vision-sdk
# or
yarn add react-native-vision-sdk

      

# Configuration

# iOS Setup

# 1. Update Info.plist

Add camera usage description to your Info.plist file:

        <key>NSCameraUsageDescription</key>
<string>This app uses the camera to scan barcodes and documents</string>

      

# 2. iOS Version Requirements (Optional Manual Setup)

If you encounter any issues, you can manually specify the iOS version and VisionSDK version in your ios/Podfile:

        platform :ios, '16.0'  # Vision SDK requires iOS 16.0+

target 'YourAppName' do
  # ... other pods
  pod 'VisionSDK', '1.9.3'  # Current version used by the SDK
end

      

# Android Setup

# 1. Update AndroidManifest.xml

Add camera permission to your android/app/src/main/AndroidManifest.xml:

        <uses-permission android:name="android.permission.CAMERA" />

      

# 2. Update Gradle Configuration

Ensure your android/build.gradle meets the minimum requirements:

        buildscript {
  ext {
    buildToolsVersion = "35.0.0"
    minSdkVersion = 29        // Vision SDK requires minimum SDK 29
    compileSdkVersion = 35
    targetSdkVersion = 35
    kotlinVersion = "1.9.0"
  }
}

      

# Basic Usage

# API Key Setup

To use OCR features, you need to generate an API key:

# Basic Component Usage

        import React from 'react';
import VisionSdkView from 'react-native-vision-sdk';

const BasicExample = () => {
    const handleBarcodeScan = (event) => {
        console.log('Barcode detected:', event.data);
    };

    const handleOCRScan = (event) => {
        console.log('OCR result:', event.data);
    };

    return (
        <VisionSdkView
            environment="prod"
            apiKey="your_generated_api_key"
            mode="barcode"
            onBarcodeScan={handleBarcodeScan}
            onOCRScan={handleOCRScan}
            style={{ flex: 1 }}
        />
    );
};

export default BasicExample;

      

# Import Options

The SDK exports both the main component and additional utilities:

        // Main component
import VisionSdkView from 'react-native-vision-sdk';

// Named imports for additional functionality
import VisionSdkView, {
  VisionCore,           // For headless operations
  VisionSdkRefProps    // TypeScript types
} from 'react-native-vision-sdk';

// VisionCore for camera-independent operations
import { VisionCore } from 'react-native-vision-sdk';

      

# Next Steps

• Props Reference - Complete list of component properties
• Barcode Scanning - Barcode and QR code detection
• OCR Scanning - Document text extraction
• Headless OCR - Camera-independent processing