React Native

AI Scanning APIs

The Vision SDK supports OCR via cloud-based APIs to extract structured data from various documents like shipping labels, BOLs (Bill of Lading), and item labels. This mode leverages RESTful APIs and requires a valid API key and environment to be configured before making any calls.

🔐 SDK Configuration for Cloud OCR

Before initiating an OCR scan, you must set the following props: mode ocrMode ocrType onOCRScan onImageCaptured apiKey environment

        import VisionSdkView from 'react-native-vision-sdk'
const SampleComponent = () => {
  const handleImageCaptured = (event) => {
    //event.image = captured image path
    //you can set any loading or meta states here
  }

  const handleOcrScan = (scanResult) => {
    //after the image is captured, upon detection, this event handler will have the scanned data from the document captured
  }


    return (
        <VisionSdkView 
            mode='ocr' 
            ocrMode='cloud'
            ocrType='shipping_label'
            onOCRScan={handleOcrScan}
            onImageCaptured={handleImageCaptured}
            environment='prod'
            apikey='your_generated_api_key'
        />
    )
}

📌 You can obtain your API key and environment details from cloud.packagex.io.

🧾 Document Types Supported

The Vision SDK cloud OCR supports the following document types:

📦 Shipping Labels

Extracts structured data such as tracking numbers, courier names, addresses, etc. More details Here

Here’s an explanation of each parameter in the callScanAPIWith method used to scan Shipping Labels via the Vision SDK's Cloud OCR API:

📦 Example Component with requried props for Shipping Label

        import VisionSdkView from 'react-native-vision-sdk'
const ShippingLabelExample = () => {
  const handleImageCaptured = (event) => {
    //event.image = captured image path
    //you can set any loading or meta states here
  }

  const handleOcrScan = (scanResult) => {
    //after the image is captured, upon detection, this event handler will have the scanned data from the document captured
  }


    return (
        <VisionSdkView 
            mode='ocr' 
            ocrMode='cloud'
            ocrType='shipping_label' // this prop defines the document type
            onOCRScan={handleOcrScan}
            onImageCaptured={handleImageCaptured}
            environment='prod'
            apikey='your_generated_api_key'
            shouldResizeImage={true} // this prop enables or disables image compression for faster processing
        />
    )
}

📄 Bills of Lading (BOL)

Detects and extracts BOL-specific fields such as carrier information, consignee details, and reference numbers. More details Here

📄 Example Component with requried props for Bill of Lading (BOL)

        import VisionSdkView from 'react-native-vision-sdk'
const BOLExample = () => {
  const handleImageCaptured = (event) => {
    //event.image = captured image path
    //you can set any loading or meta states here
  }

  const handleOcrScan = (scanResult) => {
    //after the image is captured, upon detection, this event handler will have the scanned data from the document captured
  }


    return (
        <VisionSdkView 
            mode='ocr' 
            ocrMode='cloud'
            ocrType='bill_of_lading' // this prop defines the document type
            onOCRScan={handleOcrScan}
            onImageCaptured={handleImageCaptured}
            environment='prod'
            apikey='your_generated_api_key'
            shouldResizeImage={true} // this prop enables or disables image compression for faster processing
        />
    )
}

🏷️ Item Labels

Recognizes SKU, GTIN, price, brand, and other item-level information printed on labels. More details Here

🏷️ Example Component with requried props for Item Labels

        import VisionSdkView from 'react-native-vision-sdk'
const BOLExample = () => {
  const handleImageCaptured = (event) => {
    //event.image = captured image path
    //you can set any loading or meta states here
  }

  const handleOcrScan = (scanResult) => {
    //after the image is captured, upon detection, this event handler will have the scanned data from the document captured
  }


    return (
        <VisionSdkView 
            mode='ocr' 
            ocrMode='cloud'
            ocrType='item_label' // this prop defines the document type
            onOCRScan={handleOcrScan}
            onImageCaptured={handleImageCaptured}
            environment='prod'
            apikey='your_generated_api_key'
            shouldResizeImage={true} // this prop enables or disables image compression for faster processing
        />
    )
}

AI Scanning APIs

# 🔐 SDK Configuration for Cloud OCR

# 🧾 Document Types Supported

# 📦 Shipping Labels

# 📦 Example Component with requried props for Shipping Label

# 📄 Bills of Lading (BOL)

# 📄 Example Component with requried props for Bill of Lading (BOL)

# 🏷️ Item Labels

# 🏷️ Example Component with requried props for Item Labels

On this page