1. React Native
  2. Multiple Barcode Scanning

React Native

Multiple Barcode Scanning

Multiple Barcode Scanning is a mode in the Vision SDK that allows you to scan and detect multiple barcodes within the camera frame simultaneously. This is useful in scenarios where several barcodes are present in a single image or view, and you want to capture all of them in one go.

Unlike single barcode scanning, this mode does not restrict detection to just one barcode. Instead, it returns an array of all valid barcodes detected within the scanning region, improving efficiency for batch processing or document scanning use cases.

Configure the SDK

To enable multiple barcode scanning, you need to set mode and isMultipleScanEnabled props:

        import VisionSdkView from 'react-native-vision-sdk'
const SampleComponent = () => {
    return (
        <VisionSdkView 
            mode='barcode' 
            isMultipleScanEnabled={true} 
        />
    )
}

Auto Mode Barcode Scanning

For automatic barcode capture, set the captureMode prop to auto:

Example:

        import VisionSdkView from 'react-native-vision-sdk'
const SampleComponent = () => {
    return (
        <VisionSdkView 
            mode='barcode' 
            isMultipleScanEnabled={true} 
            captureMode="auto"
        />
    )
}

Manual Mode Barcode Scanning

For manual barcode capture, set the captureMode prop to manual:

Example:

        import VisionSdkView from 'react-native-vision-sdk'
const SampleComponent = () => {
    return (
        <VisionSdkView 
            mode='barcode' 
            isMultipleScanEnabled={true} 
            captureMode="manual"
        />
    )
}

Detection Indicators

To receive detection indicators in an event handler (without actual values), use the imperative method setObjectDetectionSettings:

        import VisionSdkView, { VisionSdkRefProps } from 'react-native-vision-sdk'
import { useRef, useEffect } from 'react'

const Example = () => {
    const vsdkRef = useRef<VisionSdkRefProps>(null);
    const { width: screenWidth, height: screenHeight } = useWindowDimensions()
    const scannerWidth = screenWidth * 0.8;
    const scannerHeight = 160;
    const scannerX = (screenWidth - scannerWidth) / 2;
    const scannerY = (screenHeight - scannerHeight) / 2;

    useEffect(() => {
        vsdkRef.current?.setObjectDetectionSettings({
            isTextIndicationOn: true, //turns on indication for text
            isBarCodeOrQRCodeIndicationOn: true, // turns on indication for barcodes or qrcodes
            isDocumentIndicationOn: true, //turns on indication for document
        })
        vsdkRef.current?.startRunningHandler() // this method starts the camera feed
    }, [])

    const handleDetected = (event) => {
        //you would receive detection indicators in this event handler
        //event object is of shape: { text: boolean, barCode: boolean, qrCode: boolean, document: boolean }
        console.log(event)
        
    }


    return (
        <View style={{flex: 1}}>
            <VisionSdkView 
                ref={vsdkRef}
                mode='barcode'
                isMultipleScanEnabled={true}
                onDetected={handleDetected}
            />
        </View>
    )
}

Event Handler for Barcode Values

When barcode(s) are successfully scanned, the onBarcodeScan event handler is called with enhanced metadata for each barcode:

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

const SampleComponent = () => {
    const handleBarcodeScan = (event) => {
        // Enhanced barcode metadata structure
        console.log(`Detected ${event.codes.length} barcode(s)`);

        event.codes.forEach((code, index) => {
            console.log(`Barcode ${index + 1}:`);
            console.log('  Value:', code.scannedCode);           // "1234567890"
            console.log('  Type:', code.symbology);              // "CODE_128", "EAN_13", etc.
            console.log('  Position:', code.boundingBox);        // { x, y, width, height }
            console.log('  GS1 Data:', code.gs1ExtractedInfo);   // GS1 extracted info if applicable
        });
    }

    return (
        <View style={{flex: 1}}>
            <VisionSdkView
                mode='barcode'
                isMultipleScanEnabled={true}
                captureMode="manual"
                onBarcodeScan={handleBarcodeScan}
            />
        </View>
    )
}

Event Handler for Errors

If an error occurs during the barcode scanning process, the onError event handler will be called. You can implement this to handle any failures gracefully.

        import VisionSdkView from 'react-native-vision-sdk'
const SampleComponent = () => {
    const handleError = (error) => {
        console.log(error)
        // do something with the error
    }
    return (
        <View style={{flex: 1}}>
        <VisionSdkView 
            mode='barcode' 
            isMultipleScanEnabled={false} 
            captureMode="manual"
            onError={handleError}
        />
        </View>
    )
}

Use this method to log errors, display messages to the user, or perform recovery actions when scanning fails.

Enhanced Barcode Object Structure

When multiple barcodes are detected, each barcode in the array contains enhanced metadata:

        {
    codes: [{
        scannedCode: string;              // The barcode value (e.g., "1234567890")
        symbology: string;                // Barcode type (e.g., "CODE_128", "QR_CODE", "EAN_13")
        boundingBox: {                    // Position and dimensions of the barcode
            x: number;
            y: number;
            width: number;
            height: number;
        };
        gs1ExtractedInfo?: {              // GS1 data if applicable
            [key: string]: string;        // Key-value pairs of extracted GS1 attributes
        };
    }]
}

Barcode Metadata Fields

Field Type Description
scannedCode string The actual barcode value detected
symbology string Barcode format/type (CODE_128, QR_CODE, EAN_13, etc.)
boundingBox object Position and size of the barcode in the camera frame
gs1ExtractedInfo object (optional) Extracted GS1 application identifier data
NOTE

Enhanced barcode metadata is available on both iOS and Android platforms starting from v1.5.18+. Each barcode in the array contains complete metadata including position information, which is useful for UI overlays and barcode validation.

Sample Code

        import VisionSDK
import VisionSdkView, { VisionSdkRefProps } from 'react-native-vision-sdk'
import { useRef, useEffect } from 'react'

const Example = () => {
    const vsdkRef = useRef<VisionSdkRefProps>(null);
    const { width: screenWidth, height: screenHeight } = useWindowDimensions()
    const scannerWidth = screenWidth * 0.8;
    const scannerHeight = 160;
    const scannerX = (screenWidth - scannerWidth) / 2;
    const scannerY = (screenHeight - scannerHeight) / 2;

    useEffect(() => {
        vsdkRef.current?.setFocusSettings({
            shouldDisplayFocusImage: true, // this prop enables or disables the default focus area ui
            shouldScanInFocusImageRect: true, // this prop defines if the scanning functionality is only limited to the focus region or the entire screen
            focusImageRect: {
                x: scannerX,
                y: scannerY,
                width: scannerWidth,
                height: scannerHeight
            },
        })
        vsdkRef.current?.setObjectDetectionSettings({
            isTextIndicationOn: true, //turns on indication for text
            isBarCodeOrQRCodeIndicationOn: true, // turns on indication for barcodes or qrcodes
            isDocumentIndicationOn: true, //turns on indication for document
        })
        vsdkRef.current?.startRunningHandler() // this method starts the camera feed
    }, [])

    const handleDetected = (event) => {
        //you would receive detection indicators in this event handler
        //event object is of shape: { text: boolean, barCode: boolean, qrCode: boolean, document: boolean }
        console.log(event)
        
    }

    const handleError = (error) => {
        //do something with the error
    }

    const handleBarcodeScan = (data) => {
        // do something with the data
    }


    return (
        <View style={{flex: 1}}>
            <VisionSdkView 
                ref={vsdkRef}
                mode='barcode'
                isMultipleScanEnabled={true}
                onDetected={handleDetected}
                onBarcodeScan={handleBarcodeScan}
                onError={handleError}

            />
        </View>
    )
}
Previous <- Single Barcode Scanning
Next AI Scanning APIs ->