Barcode Scanner Component

The BarcodeScannerComponent provides a bridge to the device's native camera for scanning barcodes and QR codes.

Basic Info

• Native Class: BarcodeScannerComponent.kt
• GitHub Path: BarcodeScannerComponent.kt

Description

This component launches a native view equipped with ML Kit to scan various barcode types. Once a code is scanned, the result is sent back to the WebView via a bridge event.

How to Use

1. Web Implementation

Trigger the scanner and listen for the result.

import { useBarcodeScanner } from '@bagisto-native/react';

const ScannerComponent = () => {
    const { startScanning } = useBarcodeScanner();

    const handleScan = () => {
        startScanning((result) => {
            console.log("Scanned Code:", result.code);
            // Handle the scanned result
        });
    };

    return <button onClick={handleScan}>Open Scanner</button>;
};

2. Native Side

The component manages camera permissions and scanning.

navigator.registerBridgeComponent("barcodeScanner", BarcodeScannerComponent(this))

Required Permissions

Add to AndroidManifest.xml:

<uses-permission android:name="android.permission.CAMERA" />
<uses-feature android:name="android.hardware.camera" android:required="true" />

API Reference

Method	Description
startScanning(callback)	Opens camera and returns scanned result
stopScanning()	Closes the scanner

Next Steps

• Location Component - Add GPS features
• Image Search - Search products by image