1. React Native
  2. Single Barcode Scanning

React Native

Single Barcode Scanning

Single barcode scanning allows you to detect and process one barcode at a time within a predefined scanning window. This ensures precise detection by limiting the scan area, improving accuracy and performance.

Configure the SDK

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

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

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={false} 
            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={false} 
            captureMode="manual"
        />
    )
}

Focus Area Configuration

To define the scan region, use the imperative api method setFocusSettings and set focusImageRect parameter:

        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?.startRunningHandler() // this method starts the camera feed
    }, [])
    return (
        <View style={{flex: 1}}>
            <VisionSdkView 
                ref={vsdkRef}
                mode='barcode'
                isMultipleScanEnabled={false}
            />
        </View>
    )
}

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={false}
                onDetected={handleDetected}
            />
        </View>
    )
}

Event Handler for Barcode Values

When a barcode is successfully scanned, the onBarcodeScan event handler is called with enhanced metadata:

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

const SampleComponent = () => {
    const handleBarcodeScan = (event) => {
        // Enhanced barcode metadata structure
        event.codes.forEach(code => {
            console.log('Scanned Code:', code.scannedCode);           // "1234567890"
            console.log('Barcode 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={false}
                captureMode="manual"
                onBarcodeScan={handleBarcodeScan}
            />
        </View>
    )
}

Event Handler for Error

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

The onBarcodeScan event returns an object with enhanced metadata for each detected barcode:

        {
    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+

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={false}
                onDetected={handleDetected}
                onBarcodeScan={handleBarcodeScan}
                onError={handleError}

            />
        </View>
    )
}
Previous <- Props
Next Multiple Barcode Scanning ->