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(() => {
        const timeout = setTimeout(() => {
            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
        }, 0)

        return () => {
            clearTimeout(timeout)
        }
    }, [])

    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:

        import VisionSdkView from 'react-native-vision-sdk'
const SampleComponent = () => {
    const handleBarcodeScan = (obj) => {
        /*
        obj is of the following shape:
         { codes: [{ 
             scannedCode: 'detectedbarcode', 
             extractedInfo: {} // this key would include any detected attributes according to the gs1 spec
            } 
        ]}*/
        console.log(obj)
    }
    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.

🧪 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(() => {
        const timeout = setTimeout(() => {
            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
        }, 0)

        return () => {
            clearTimeout(timeout)
        }
    }, [])

    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>
    )
}

Multiple Barcode Scanning

# ⚙️ Configure the SDK

# 🤖 Auto Mode Barcode Scanning

# ✋ Manual Mode Barcode Scanning

# 🧭 Detection Indicators

# 📦Event handler for Barcode Values

# ❗️Event Handler for Errors

# 🧪 Sample Code