1. React Native
  2. Props

React Native

Props

WARNING

v3.0.0 Breaking Change: The VisionSdkView component has been removed. Use VisionCamera instead. See the Release Notes for migration details.

VisionCamera Component Props

The VisionCamera component is the primary camera component for barcode scanning and OCR. It provides a streamlined API without requiring API keys or cloud configuration for basic scanning functionality.

Prop Type Default Description
ref React.Ref<VisionCameraRefProps> — Imperative ref to call methods (capture, start/stop, etc.) on the camera.
scanMode 'photo' | 'barcode' | 'qrcode' | 'barcodeOrQrCode' | 'ocr' 'photo' Detection mode for the camera
autoCapture boolean false Automatically capture when detection is successful
enableFlash boolean false Enable/disable camera flash
zoomLevel number 1.0 Camera zoom level (device dependent, typically 1.0-5.0)
cameraFacing 'back' | 'front' 'back' Camera facing direction - 'back' for rear camera or 'front' for front-facing camera. iOS: Fully supported | Android: Placeholder (not yet functional)
scanArea { x: number, y: number, width: number, height: number } undefined Restrict scanning to a specific region (coordinates in dp)
detectionConfig object See below Configure object detection settings
frameSkip number undefined Process every Nth frame for performance optimization
template TemplateData | null null NEW in v3.0.0: Template for barcode pattern matching. Pass a TemplateData object to apply, or null to remove. See Template Management
onBarcodeDetected (event: { codes: Array<BarcodeResult> }) => void () => {} Fired when barcode(s) are detected
onCapture (event: { image: string, nativeImage: string, sharpnessScore?: number, barcodes?: Array<BarcodeResult> }) => void () => {} Fired when image is captured
onRecognitionUpdate (event: { text: boolean, barcode: boolean, qrcode: boolean, document: boolean }) => void () => {} Continuous updates of detected objects
onSharpnessScoreUpdate (event: { sharpnessScore: number }) => void () => {} Image sharpness score updates (0-1)
onBoundingBoxesUpdate (event: { barcodeBoundingBoxes: Array<DetectedCodeBoundingBox>, qrCodeBoundingBoxes: Array<DetectedCodeBoundingBox>, documentBoundingBox: BoundingBox }) => void () => {} Bounding boxes for detected objects
onError (event: { message: string, code?: number }) => void () => {} Error events

Detection Config Object

        detectionConfig={{
  text: true,              // Enable text detection (iOS only)
  barcode: true,           // Enable barcode detection
  document: true,          // Enable document detection (iOS only)
  barcodeConfidence: 0.5,  // Barcode detection confidence (0-1, iOS only)
  documentConfidence: 0.5, // Document confidence (0-1, iOS only)
  documentCaptureDelay: 2.0 // Delay before auto-capture (seconds, iOS only)
}}

VisionCameraRefProps — Imperative Methods Reference

Method Parameters Return Description Example
capture() — void Capture image manually (when autoCapture is false) cameraRef.current?.capture()
start() — void Start camera (only needed if you previously stopped it) cameraRef.current?.start()
stop() — void Stop camera (e.g., when screen goes to background) cameraRef.current?.stop()
NOTE

Camera Auto-Start: The camera starts automatically when mounted - you don't need to call start() manually in most cases.

Property Control: Flash, zoom, and camera facing are controlled via props (enableFlash, zoomLevel, cameraFacing), not ref methods. Update the prop values to change these settings dynamically.

VisionCore Methods

For camera-independent OCR prediction and logging operations, use the VisionCore module instead of the component ref methods:

  • Model Management: Use VisionCore.downloadModel(), VisionCore.loadOCRModel(), etc. — See Documentation
  • Headless OCR Prediction: Use VisionCore.predictWithModule(), VisionCore.predictShippingLabelCloud(), etc. — See Documentation
  • Data Logging: Use VisionCore.logItemLabelDataToPx(), VisionCore.logShippingLabelDataToPx() — See Documentation
        import { VisionCore } from 'react-native-vision-sdk';

// Model management (on-device OCR)
const module = { type: 'shipping_label', size: 'large' };
await VisionCore.downloadModel(module, apiKey, token, progressCallback);
await VisionCore.loadOCRModel(module, apiKey, token);

// Camera-independent prediction
const result = await VisionCore.predictWithModule(module, imageUri, barcodes);

// Or cloud prediction (no model required)
const cloudResult = await VisionCore.predictShippingLabelCloud(imageUri, [], options);

// Data logging
await VisionCore.logItemLabelDataToPx(imageUri, barcodes, responseData, token, apiKey, true, metadata);
Previous <- Setup
Next Single Barcode Scanning ->