How do you integrate barcode and QR code scanning?

Short answer

Use the CameraView component from expo-camera (which replaced the removed expo-barcode-scanner package), with the onBarcodeScanned property and only the target code types to avoid unnecessary processor use.

Explanation

Start the camera preview and listen for barcodes. As soon as a valid code is captured, disable scanning with a Boolean state (for example, const [scanned, setScanned] = useState(false)) to prevent the event handler from being called dozens of times per second for the same code.

Code example

import { CameraView, useCameraPermissions } from "expo-camera";
import { useState } from "react";

function BarcodeScanner() {
  const [permission, requestPermission] = useCameraPermissions();
  const [scanned, setScanned] = useState(false);

  if (!permission?.granted) {
    return <Button title="Allow camera" onPress={requestPermission} />;
  }

  const handleBarcodeScanned = ({ data }: { data: string }) => {
    setScanned(true);                 // stop scanning after the first valid code
    alert(`Scanned: ${data}`);
  };

  return (
    <CameraView
      style={{ flex: 1 }}
      barcodeScannerSettings={{ barcodeTypes: ["qr", "ean13"] }}
      onBarcodeScanned={scanned ? undefined : handleBarcodeScanned}
    />
  );
}

Common mistakes

• Failing to disable onBarcodeScanned after the first successful read, repeatedly firing requests for the same code.

Follow-up questions

• How do you save and read local files with FileSystem and share content through the Sharing API?

Sources

• Expo docs — Camera