react-native-vision-camera: 🐛 With 3.6.3, Barcode scanner does not recognize barcodes on Android as it did with 3.5.1

What’s happening?

I upgraded this dependency from v2 to v3 recently. With 3.5.1 I had an issue that the scanner camera view was not positioned properly on Android. (With 3.5.1 the scanner could scan a barcode very sensitively.) Later I updated it to 3.6.3 and the UI layout problem is gone on Android, but the scanner could not recognized the barcode anymore.

Reproduceable Code

...
export const SmartCameraView = ({
  onCancel,
  onImageCaptured,
  title,
  errorMessage,
  types = [
    'aztec',
    'codabar',
    'code-128',
    'code-39',
    'code-93',
    'data-matrix',
    'ean-13',
    'ean-8',
    'itf',
    'pdf-417',
    'qr',
    'upc-e',
  ], // Default to All barcode types.
  mode,
}: SmartCameraViewProps) => {
  const devices = useCameraDevices();
  const device = devices.find((d) => d.position === 'back');
  const camera = React.useRef<Camera>(null);
  const isFocused = useIsFocused();
  const isForeground = useIsForeground();
  const isActive = isFocused && isForeground;
  const isBarcodeScan = mode?.scan === ScanType.Barcode;
  const isVinScan = mode?.scan === ScanType.Vin;
  const isScanEnabled = isBarcodeScan || isVinScan;

  const [barcodes, setBarcodes] = React.useState<Barcode[]>();
  const setBarcodesSafely = (detectedBarcodes: Barcode[]) => {
    if (isActive && mounted.value && isScanEnabled) {
      setBarcodes(detectedBarcodes);
    }
  };

  const codeScanner = useCodeScanner({
    codeTypes: types,
    onCodeScanned(codes) {
      if (codes.length) {
        runOnJS(setBarcodesSafely)(codes);
      }
    },
  });

  React.useEffect(() => {
    if (isActive && barcodes?.length && barcodes?.[0].value && isScanEnabled) {
      log.debug('Got Barcodes: ', barcodes);
      onImageCaptured(barcodes?.[0]);
    }
  }, [barcodes, onImageCaptured, isActive, isScanEnabled]);

  const CameraContainer = () => {
    return device ? (
      <Camera
        style={styles.boundingBoxFrame}
        ref={camera}
        device={device}
        isActive={isActive}
        enableZoomGesture={Boolean(mode?.photo)}
        zoom={device?.neutralZoom ?? 1}
        photo={Boolean(mode?.photo)}
        codeScanner={codeScanner}
      />
    ) : (
      <></>
    );
  };

  return (
    <SharedCameraViewContainer
      devices={devices}
      device={device}
      camera={camera}
      frameView={
        <BoundingBoxFrame cameraContainer={CameraContainer} isBarcodeScan={isBarcodeScan} />
      }
      onCancel={onCancel}
      onImageCaptured={onImageCaptured}
      title={title}
      types={types}
      errorMessage={errorMessage}
      mode={mode}
    />
  );
};

Relevant log output

N/A

Camera Device

A Google Pixel 7 back camera

Device

Google Pixel 7 (Android 13)

VisionCamera Version

3.6.3

Can you reproduce this issue in the VisionCamera Example app?

Yes, I can reproduce the same issue in the Example app here

Additional information

About this issue

  • Original URL
  • State: closed
  • Created 8 months ago
  • Reactions: 5
  • Comments: 44 (5 by maintainers)

Most upvoted comments

I’m having the same issue

Same here, works fine on iOS, but it does not recognize on Android. plz help me codeTypes: [‘qr’, ‘ean-13’], “react-native-vision-camera”: “^3.6.4”, <Camera style={{ width: “100%”, height: “100%” , backgroundColor:w}} device={device}

          isActive={true}
          {...props} codeScanner={codeScanner}
        >

Same here, works fine on iOS but it does not recognize on Android.