1. React Native
  2. Logging APIs

React Native

Logging APIs

The Vision SDK provides logging APIs through the VisionCore module to send item label and shipping label data to PackageX Vision for analytics, reporting, and data collection purposes. These APIs support both remote and local image URIs with enhanced metadata capabilities.

INFO

For complete VisionCore API reference including setEnvironment(), loadModel(), and all available methods, see the VisionCore Module Documentation.

🔧 Available Logging Methods

VisionCore.logItemLabelDataToPx

Logs item label data to PackageX Vision with support for optional metadata, enabling enhanced tracking and context for your item scanning workflows.

Method Signature

        VisionCore.logItemLabelDataToPx(
    imageUri: string,
    barcodes: string[],
    responseData: any,
    token: string | null,
    apiKey: string | null,
    shouldResizeImage: boolean = true,
    metadata: {[key: string]: any} | null = {}
): Promise<any>

Parameters

  • imageUri (required): Image URI (local file path or remote URL)
  • barcodes (required): Array of barcode values detected in the image
  • responseData (required): OCR response data object
  • token (optional): Authentication token
  • apiKey (optional): API key
  • shouldResizeImage (optional): Whether to resize image before uploading (default: true)
  • metadata (optional): Custom metadata object for additional context

Example Usage

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

const ItemLabelLoggingExample = () => {
    useEffect(() => {
        // Set environment for VisionCore
        VisionCore.setEnvironment('prod');
    }, []);

    const logItemLabelData = async () => {
        try {
            const imageUri = 'file:///path/to/item-label.jpg';
            const barcodes = ['1234567890123', '9876543210987'];
            const responseData = { data: { /* OCR response data */ } };

            const metadata = {
                orderId: 'ORD-12345',
                warehouse: 'WH-001',
                operator: 'john.doe',
                timestamp: new Date().toISOString(),
                batchId: 'BATCH-789',
                productCategory: 'electronics'
            };

            const result = await VisionCore.logItemLabelDataToPx(
                imageUri,
                barcodes,
                responseData,
                null, // token
                'your_api_key',
                true, // shouldResizeImage
                metadata
            );

            console.log('Item label logged successfully:', result);
        } catch (error) {
            console.error('Failed to log item label:', error);
        }
    };

    return (
        // Your UI components here
        <TouchableOpacity onPress={logItemLabelData}>
            <Text>Log Item Label Data</Text>
        </TouchableOpacity>
    );
};

VisionCore.logShippingLabelDataToPx

Logs shipping label data to PackageX Vision with support for metadata, recipient, and sender information for comprehensive shipment tracking.

Method Signature

        VisionCore.logShippingLabelDataToPx(
    imageUri: string,
    barcodes: string[],
    responseData: any,
    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 = true
): Promise<any>

Parameters

  • imageUri (required): Image URI (local file path or remote URL)
  • barcodes (required): Array of barcode/tracking values
  • responseData (required): OCR response data object
  • token (optional): Authentication token
  • apiKey (optional): API key
  • locationId (optional): Location identifier
  • options (optional): Additional options object
  • metadata (optional): Custom metadata object
  • recipient (optional): Recipient information object
  • sender (optional): Sender information object
  • shouldResizeImage (optional): Whether to resize image before uploading (default: true)

Example Usage

        const logShippingLabelData = async () => {
    try {
        const imageUri = 'file:///path/to/shipping-label.jpg';
        const trackingNumbers = ['1Z999AA1234567890', '1Z999BB9876543210'];
        const responseData = { data: { /* OCR response data */ } };

        const metadata = {
            shipmentId: 'SHIP-12345',
            carrier: 'UPS',
            service: 'Ground',
            weight: '2.5 lbs',
            scanLocation: 'warehouse-dock-3',
            operator: 'jane.smith'
        };

        const recipient = {
            name: 'John Doe',
            company: 'Acme Corp',
            address: '123 Main St',
            city: 'New York',
            state: 'NY',
            zipCode: '10001',
            phone: '+1-555-123-4567'
        };

        const sender = {
            name: 'Jane Smith',
            company: 'PackageX Inc',
            address: '456 Oak Ave',
            city: 'San Francisco',
            state: 'CA',
            zipCode: '94102',
            phone: '+1-555-987-6543'
        };

        const result = await VisionCore.logShippingLabelDataToPx(
            imageUri,
            trackingNumbers,
            responseData,
            null, // token
            'your_api_key',
            'dock_location_001',
            null, // options
            metadata,
            recipient,
            sender,
            true // shouldResizeImage
        );

        console.log('Shipping label logged successfully:', result);
    } catch (error) {
        console.error('Failed to log shipping label:', error);
    }
};

📱 Complete Example with Error Handling

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

const LoggingAPIExample = () => {
    const [isLogging, setIsLogging] = useState(false);

    useEffect(() => {
        // Initialize VisionCore environment
        VisionCore.setEnvironment('prod');
    }, []);

    const selectAndLogImage = (type: 'item' | 'shipping') => {
        launchImageLibrary(
            {
                mediaType: 'photo',
                quality: 0.8,
            },
            (response) => {
                if (response.assets && response.assets[0]) {
                    const imageUri = response.assets[0].uri;
                    setIsLogging(true);

                    if (type === 'item') {
                        logItemLabel(imageUri);
                    } else {
                        logShippingLabel(imageUri);
                    }
                }
            }
        );
    };

    const logItemLabel = async (imageUri: string) => {
        const metadata = {
            sessionId: Date.now().toString(),
            appVersion: '1.0.0',
            deviceModel: 'iPhone 12',
            scanType: 'manual_gallery_selection'
        };

        const responseData = {
            data: {
                /* Simulated OCR response data */
                inference: {
                    barcode_values: [],
                    detected_text: 'Sample item label'
                }
            }
        };

        try {
            const result = await VisionCore.logItemLabelDataToPx(
                imageUri,
                [], // no barcodes
                responseData,
                null, // token
                'your_api_key',
                true, // shouldResizeImage
                metadata
            );

            setIsLogging(false);
            Alert.alert('Success', 'Item label data logged successfully');
            console.log('Item logging result:', result);
        } catch (error) {
            setIsLogging(false);
            Alert.alert('Error', 'Failed to log item label data');
            console.error('Item logging error:', error);
        }
    };

    const logShippingLabel = async (imageUri: string) => {
        const metadata = {
            sessionId: Date.now().toString(),
            scanSource: 'mobile_gallery',
            expectedCarrier: 'unknown'
        };

        const responseData = {
            data: {
                /* Simulated OCR response data */
                barcode_values: [],
                tracking_number: 'Sample tracking'
            }
        };

        try {
            const result = await VisionCore.logShippingLabelDataToPx(
                imageUri,
                [], // no barcodes
                responseData,
                null, // token
                'your_api_key',
                'mobile_app', // locationId
                null, // options
                metadata,
                null, // recipient
                null, // sender
                true // shouldResizeImage
            );

            setIsLogging(false);
            Alert.alert('Success', 'Shipping label data logged successfully');
            console.log('Shipping logging result:', result);
        } catch (error) {
            setIsLogging(false);
            Alert.alert('Error', 'Failed to log shipping label data');
            console.error('Shipping logging error:', error);
        }
    };

    return (
        <View style={{ flex: 1, padding: 20 }}>
            <TouchableOpacity
                onPress={() => selectAndLogImage('item')}
                disabled={isLogging}
                style={{
                    backgroundColor: isLogging ? '#ccc' : '#007AFF',
                    padding: 15,
                    borderRadius: 8,
                    alignItems: 'center',
                    marginBottom: 15
                }}
            >
                <Text style={{ color: 'white', fontSize: 16 }}>
                    {isLogging ? 'Logging...' : 'Log Item Label'}
                </Text>
            </TouchableOpacity>

            <TouchableOpacity
                onPress={() => selectAndLogImage('shipping')}
                disabled={isLogging}
                style={{
                    backgroundColor: isLogging ? '#ccc' : '#28a745',
                    padding: 15,
                    borderRadius: 8,
                    alignItems: 'center'
                }}
            >
                <Text style={{ color: 'white', fontSize: 16 }}>
                    {isLogging ? 'Logging...' : 'Log Shipping Label'}
                </Text>
            </TouchableOpacity>
        </View>
    );
};

export default LoggingAPIExample;

🔍 Image URI Support

Both logging methods support various image URI formats:

Local File URIs

        // iOS
'file:///var/mobile/Containers/Data/Application/.../image.jpg'

// Android
'file:///storage/emulated/0/Pictures/image.jpg'

// React Native Image Picker
'file:///path/to/selected/image.jpg'

Remote URIs

        // HTTPS URLs
'https://example.com/images/label.jpg'

// Data URIs (base64)
'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEA...'

📊 Metadata Best Practices

Item Label Metadata

        const itemMetadata = {
    // Required for tracking
    sessionId: 'unique_session_id',

    // Business context
    orderId: 'ORD-12345',
    customerId: 'CUST-789',
    warehouseId: 'WH-001',

    // Operational data
    operator: 'employee_id',
    scanLocation: 'receiving_dock_3',
    expectedSKU: 'SKU-123456',

    // Technical context
    appVersion: '2.1.0',
    deviceModel: 'iPhone 13',
    timestamp: new Date().toISOString()
};

Shipping Label Metadata

        const shippingMetadata = {
    // Shipment tracking
    shipmentId: 'SHIP-67890',
    manifestId: 'MAN-456',
    routeId: 'RT-123',

    // Operational context
    scanPoint: 'sorting_facility_A',
    expectedCarrier: 'FedEx',
    serviceType: 'Express',

    // Quality control
    imageQuality: 'high',
    lightingCondition: 'good',
    scanAngle: 'front_facing'
};

🔐 Environment and Authentication

VisionCore logging methods require proper environment setup and authentication:

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

// Set environment once at app initialization
VisionCore.setEnvironment('prod'); // or 'staging', 'dev', etc.

// Pass authentication in method calls
const result = await VisionCore.logItemLabelDataToPx(
    imageUri,
    barcodes,
    responseData,
    null,           // token (optional)
    'your_api_key', // API key (required)
    true,           // shouldResizeImage
    metadata        // custom metadata
);

🔄 Return Values

Unlike the camera-based SDK methods, VisionCore logging methods are async and return promises:

        try {
    const result = await VisionCore.logShippingLabelDataToPx(/* params */);
    console.log('Logging successful:', result);
} catch (error) {
    console.error('Logging failed:', error.message);
}
NOTE

For processing images and receiving structured OCR data, use the headless OCR prediction methods instead. Logging methods are specifically for sending data to PackageX Vision for analytics and reporting purposes.

Previous <- Headless OCR Prediction
Next VisionCore Module ->