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(() => {
        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.startRunningHandler() // this method starts the camera feed
        }, 0)

        return () => {
            clearTimeout(timeout)
        }
    }, [])
    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(() => {
        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={false}
                onDetected={handleDetected}
            />
        </View>
    )
}

📦Event handler for Barcode Values

When a barcode is 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={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.

🧾 Barcode Object Structure

The DetectedBarcode object returned in the onBarcodeScan event has the following structure:

        {
    codes: [{
        scannedCode: 'detectedcode',
        extractedInfo: {} //additional detected attributes according to the gs1 spec
    }]
}

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

            />
        </View>
    )
}

Single Barcode Scanning

# ⚙️ Configure the SDK

# 🤖 Auto Mode Barcode Scanning

# ✋ Manual Mode Barcode Scanning

# 🎯 Focus Area Configuration

# 🧭 Detection Indicators

# 📦Event handler for Barcode Values

# ❗️Event handler for error

# 🧾 Barcode Object Structure

# 🧪 Sample Code

On this page