React Native

VisionCore Module

The VisionCore module provides camera-independent functionality for the React Native Vision SDK. It allows you to perform OCR predictions, model management, and data logging without requiring the camera component.

# 📦 Import and Setup

        import { VisionCore } from 'react-native-vision-sdk';

      

# 🌍 Environment Management

# VisionCore.setEnvironment(environment)

Sets the environment for all VisionCore operations. This should be called once during app initialization.

# Parameters

• environment (required): Environment string - 'staging' | 'dev' | 'sandbox' | 'qa' | 'production'

# Example

        import { VisionCore } from 'react-native-vision-sdk';

// Set environment during app initialization
VisionCore.setEnvironment('production');

// For development/testing
VisionCore.setEnvironment('staging');

      

# 🧠 Model Management

# VisionCore.loadModel(token, apiKey, modelType, modelSize)

Loads on-device models without requiring the camera view. This method downloads and prepares models for offline OCR processing.

# Parameters

• token (optional): Authentication token (string | null)
• apiKey (optional): API key (string | null)
• modelType (required): Model type (string)
  • 'shipping_label'
  • 'item_label'
  • 'bill_of_lading'
  • 'document_classification'
• modelSize (required): Model size (string)
  • 'nano' - Smallest, fastest
  • 'micro' - Small and fast
  • 'small' - Balanced
  • 'medium' - Higher accuracy
  • 'large' - Best accuracy
  • 'xlarge' - Maximum accuracy

# Returns

• Promise<void> - Resolves when model loading starts

# Example

        const loadShippingLabelModel = async () => {
    try {
        await VisionCore.loadModel(
            null,                    // token (optional)
            'your_api_key',         // apiKey
            'shipping_label',       // modelType
            'large'                 // modelSize
        );
        console.log('Model loading started');
    } catch (error) {
        console.error('Failed to load model:', error);
    }
};

      

# VisionCore.onModelDownloadProgress(callback)

Subscribes to model download progress updates. Returns a subscription that can be removed.

# Parameters

• callback (required): Function that receives progress updates
  • progress (number): Download progress (0.0 to 1.0)
  • downloadStatus (boolean): Whether model is downloaded
  • isReady (boolean): Whether model is ready for use

# Returns

• Subscription - Event subscription with .remove() method

# Example

        import { useEffect, useState } from 'react';

const ModelProgressExample = () => {
    const [progress, setProgress] = useState(0);
    const [isReady, setIsReady] = useState(false);

    useEffect(() => {
        const subscription = VisionCore.onModelDownloadProgress((progress, downloadStatus, isReady) => {
            setProgress(progress * 100); // Convert to percentage
            setIsReady(isReady);

            if (isReady) {
                console.log('Model is ready for predictions!');
            }
        });

        // Load model
        VisionCore.loadModel(null, 'your_api_key', 'shipping_label', 'large');

        // Cleanup subscription
        return () => subscription.remove();
    }, []);

    return (
        <View>
            <Text>Download Progress: {progress.toFixed(0)}%</Text>
            <Text>Model Ready: {isReady ? 'Yes' : 'No'}</Text>
        </View>
    );
};

      

# 🔮 Prediction Methods

# On-Device Prediction

# VisionCore.predict(imagePath, barcodes)

Performs on-device OCR prediction using the loaded model.

# Parameters

• imagePath (required): Path to image file (string)
• barcodes (optional): Array of detected barcodes (string[], default: [])

# Returns

• Promise<any> - OCR prediction result

# Example

        const performOnDevicePrediction = async () => {
    try {
        const imageUri = 'file:///path/to/image.jpg';
        const barcodes = ['1234567890']; // Optional

        const result = await VisionCore.predict(imageUri, barcodes);
        console.log('Prediction result:', result);
    } catch (error) {
        console.error('Prediction failed:', error);
    }
};

      

# Cloud Prediction Methods

# VisionCore.predictShippingLabelCloud(imagePath, barcodes, options)

Cloud-based shipping label prediction.

# Parameters

• imagePath (required): Image file path (string)
• barcodes (optional): Barcode array (string[], default: [])
• options (optional): Configuration object
  • token?: string | null
  • apiKey?: string | null
  • locationId?: string | null
  • options?: {[key: string]: any} | null
  • metadata?: {[key: string]: any} | null
  • recipient?: {[key: string]: any} | null
  • sender?: {[key: string]: any} | null
  • shouldResizeImage?: boolean

# Example

        const options = {
    apiKey: 'your_api_key',
    metadata: { orderId: '12345' },
    shouldResizeImage: true
};

const result = await VisionCore.predictShippingLabelCloud(imageUri, [], options);

      

# VisionCore.predictItemLabelCloud(imagePath, options)

Cloud-based item label prediction.

# Parameters

• imagePath (required): Image file path (string)
• options (optional): Configuration object
  • token?: string | null
  • apiKey?: string | null
  • shouldResizeImage?: boolean

# VisionCore.predictBillOfLadingCloud(imagePath, barcodes, options)

Cloud-based bill of lading prediction.

# Parameters

• imagePath (required): Image file path (string)
• barcodes (optional): Barcode array (string[], default: [])
• options (optional): Configuration object
  • token?: string | null
  • apiKey?: string | null
  • locationId?: string | null
  • options?: {[key: string]: any} | null
  • shouldResizeImage?: boolean

# VisionCore.predictDocumentClassificationCloud(imagePath, options)

Cloud-based document classification.

# Parameters

• imagePath (required): Image file path (string)
• options (optional): Configuration object
  • token?: string | null
  • apiKey?: string | null
  • shouldResizeImage?: boolean

# VisionCore.predictWithCloudTransformations(imagePath, barcodes, options)

Hybrid on-device + cloud prediction.

# Parameters

• imagePath (required): Image file path (string)
• barcodes (optional): Barcode array (string[], default: [])
• options (optional): Configuration object (same as shipping label options)

# 📊 Logging Methods

# VisionCore.logItemLabelDataToPx(imageUri, barcodes, responseData, token, apiKey, shouldResizeImage, metadata)

Logs item label data to PackageX Vision for analytics.

# Parameters

• imageUri (required): Image file path (string)
• barcodes (required): Barcode array (string[])
• responseData (required): OCR response data (any)
• token (optional): Auth token (string | null)
• apiKey (optional): API key (string | null)
• shouldResizeImage (optional): Resize image (boolean, default: true)
• metadata (optional): Custom metadata ({[key: string]: any} | null, default: {})

# Returns

• Promise<any> - Logging result

# VisionCore.logShippingLabelDataToPx(imageUri, barcodes, responseData, token, apiKey, locationId, options, metadata, recipient, sender, shouldResizeImage)

Logs shipping label data to PackageX Vision for analytics.

# Parameters

• imageUri (required): Image file path (string)
• barcodes (required): Barcode array (string[])
• responseData (required): OCR response data (any)
• token (optional): Auth token (string | null)
• apiKey (optional): API key (string | null)
• locationId (optional): Location ID (string | null)
• options (optional): Additional options ({[key: string]: any} | null)
• metadata (optional): Custom metadata ({[key: string]: any} | null)
• recipient (optional): Recipient info ({[key: string]: any} | null)
• sender (optional): Sender info ({[key: string]: any} | null)
• shouldResizeImage (optional): Resize image (boolean, default: true)

# Returns

• Promise<any> - Logging result

# 📱 Complete Setup Example

        import React, { useEffect, useState } from 'react';
import { View, Text, TouchableOpacity, Alert } from 'react-native';
import { VisionCore } from 'react-native-vision-sdk';

const VisionCoreExample = () => {
    const [isModelReady, setIsModelReady] = useState(false);
    const [progress, setProgress] = useState(0);

    useEffect(() => {
        // 1. Set environment
        VisionCore.setEnvironment('production');

        // 2. Monitor model download progress
        const subscription = VisionCore.onModelDownloadProgress((progress, downloadStatus, isReady) => {
            setProgress(progress * 100);
            setIsModelReady(isReady);
        });

        // 3. Load model
        loadModel();

        return () => subscription.remove();
    }, []);

    const loadModel = async () => {
        try {
            await VisionCore.loadModel(
                null,
                'your_api_key',
                'shipping_label',
                'large'
            );
        } catch (error) {
            console.error('Failed to load model:', error);
        }
    };

    const performPrediction = async () => {
        if (!isModelReady) {
            Alert.alert('Model Not Ready', 'Please wait for model to finish loading');
            return;
        }

        try {
            // Example with on-device prediction
            const result = await VisionCore.predict('file:///path/to/image.jpg', []);
            Alert.alert('Success', JSON.stringify(result, null, 2));
        } catch (error) {
            Alert.alert('Error', error.message);
        }
    };

    return (
        <View style={{ padding: 20 }}>
            <Text>Model Progress: {progress.toFixed(0)}%</Text>
            <Text>Model Ready: {isModelReady ? 'Yes' : 'No'}</Text>

            <TouchableOpacity
                onPress={performPrediction}
                disabled={!isModelReady}
                style={{
                    backgroundColor: isModelReady ? '#007AFF' : '#ccc',
                    padding: 15,
                    borderRadius: 8,
                    alignItems: 'center',
                    marginTop: 20
                }}
            >
                <Text style={{ color: 'white' }}>
                    {isModelReady ? 'Predict' : 'Loading Model...'}
                </Text>
            </TouchableOpacity>
        </View>
    );
};

export default VisionCoreExample;

      

# 🔗 Related Documentation

• Headless OCR Prediction - Camera-independent OCR workflows
• Logging APIs - Data logging for analytics
• Props Reference - Camera component properties