scanBarcodes returns undefined upon scanning a QR code

[SirFitz]

Issue: The return variable from the scanBarcodes function returns:

1. an empty array when no QR codes are in frame
2. undefined when a QR code is in frame

Any assistance would be appreciated. Debugger mode is disabled, that solution was suggested in another issue but doesn't make any difference to the result.

Versions: OS Version: Android Android API Version: 33 react-native: 0.71.7 react-native-vision-camera: 2.15.4 vision-camera-code-scanner: 0.2.0 react-native-reanimated: 2.10.0

Code:

import React, { memo, useEffect, useState } from 'react';
import { runOnJS } from 'react-native-reanimated';
import { Camera, useCameraDevices, useFrameProcessor } from 'react-native-vision-camera';
import { BarcodeFormat, scanBarcodes, Barcode } from 'vision-camera-code-scanner';
import { Container } from './styles';

interface QRReaderProps {
  testID?: string;
}

const QRReader: React.FC<QRReaderProps> = ({ testID }) => {
  const [hasPermission, setHasPermission] = React.useState(false);
  const devices = useCameraDevices();
  const device = devices.back;
  const [barcodes, setBarcodes] = useState<Barcode[]>([]);

  useEffect(() => {
    console.log('barcodesState', barcodes); // undefined
  }, [barcodes]);

  const frameProcessor = useFrameProcessor((frame) => {
    'worklet';
    const detectedBarcodes = scanBarcodes(frame, [BarcodeFormat.QR_CODE]);
    runOnJS(setBarcodes)(detectedBarcodes);
  }, []);

  React.useEffect(() => {
    (async () => {
      const status = await Camera.requestCameraPermission();
      setHasPermission(status === 'authorized');
    })();
  }, []);

  return (
    <Container testID={testID}>
      {device && hasPermission && (
        <Camera
          style={{ width: '100%', height: '100%', position: 'absolute' }}
          device={device}
          isActive
          frameProcessor={frameProcessor}
          frameProcessorFps={1}
        />
      )}
    </Container>
  );
};

export { QRReader };
export default memo(QRReader);

QRReader.defaultProps = {
  testID: 'qrreader-testID',
};

[VictorPulzz]

Same error

[matavera]

I am having the same error

[SirFitz]

I addressed the issues using patch-package, the google mlkit dependency route changed and I also made some updates to the Android SDK versions and dependency versions for compatibility:

diff --git a/node_modules/vision-camera-code-scanner/android/build.gradle b/node_modules/vision-camera-code-scanner/android/build.gradle
index b6bd964..4567cfb 100644
--- a/node_modules/vision-camera-code-scanner/android/build.gradle
+++ b/node_modules/vision-camera-code-scanner/android/build.gradle
@@ -18,11 +18,11 @@ def safeExtGet(prop, fallback) {
 }

 android {
-    compileSdkVersion safeExtGet('VisionCameraCodeScanner_compileSdkVersion', 30)
+    compileSdkVersion safeExtGet('compileSdkVersion', 30)
     ndkVersion "21.4.7075529"
     defaultConfig {
-        minSdkVersion safeExtGet('VisionCameraCodeScanner_minSdkVersion', 21)
-        targetSdkVersion safeExtGet('VisionCameraCodeScanner_targetSdkVersion', 31)
+        minSdkVersion safeExtGet('minSdkVersion', 21)
+        targetSdkVersion safeExtGet('targetSdkVersion', 31)
         versionCode 1
         versionName "1.0"

@@ -56,6 +56,6 @@ dependencies {
     //noinspection GradleDynamicVersion
     implementation "com.facebook.react:react-native:+"  // From node_modules
     api project(":react-native-vision-camera")
-    implementation "androidx.camera:camera-core:1.1.0-alpha06"
-    implementation 'com.google.mlkit:barcode-scanning:17.0.0'
+    implementation "androidx.camera:camera-core:1.1.0-alpha08"
+    implementation 'com.google.mlkit:barcode-scanning:17.0.2'
 }
diff --git a/node_modules/vision-camera-code-scanner/android/src/main/java/com/visioncameracodescanner/BarcodeConverter.java b/node_modules/vision-camera-code-scanner/android/src/main/java/com/visioncameracodescanner/BarcodeConverter.java
index 74e208b..eb4ed07 100644
--- a/node_modules/vision-camera-code-scanner/android/src/main/java/com/visioncameracodescanner/BarcodeConverter.java
+++ b/node_modules/vision-camera-code-scanner/android/src/main/java/com/visioncameracodescanner/BarcodeConverter.java
@@ -7,7 +7,7 @@ import androidx.annotation.NonNull;

 import com.facebook.react.bridge.WritableNativeArray;
 import com.facebook.react.bridge.WritableNativeMap;
-import com.google.mlkit.vision.barcode.Barcode;
+import com.google.mlkit.vision.barcode.common.Barcode;

 import java.util.List;

diff --git a/node_modules/vision-camera-code-scanner/android/src/main/java/com/visioncameracodescanner/VisionCameraCodeScannerPlugin.java b/node_modules/vision-camera-code-scanner/android/src/main/java/com/visioncameracodescanner/VisionCameraCodeScannerPlugin.java
index 8198564..a3adafd 100644
--- a/node_modules/vision-camera-code-scanner/android/src/main/java/com/visioncameracodescanner/VisionCameraCodeScannerPlugin.java
+++ b/node_modules/vision-camera-code-scanner/android/src/main/java/com/visioncameracodescanner/VisionCameraCodeScannerPlugin.java
@@ -24,7 +24,7 @@ import androidx.camera.core.ImageProxy;
 import com.google.android.gms.tasks.Tasks;
 import com.mrousavy.camera.frameprocessor.FrameProcessorPlugin;
 import com.google.android.gms.tasks.Task;
-import com.google.mlkit.vision.barcode.Barcode;
+import com.google.mlkit.vision.barcode.common.Barcode;
 import com.google.mlkit.vision.barcode.BarcodeScanner;
 import com.google.mlkit.vision.barcode.BarcodeScanning;
 import com.google.mlkit.vision.barcode.BarcodeScannerOptions;

[jadonshubham]

@SirFitz Thanks for help. I was also facing same issue.

Also for me only updating below fixed the issue. implementation 'com.google.mlkit:barcode-scanning:17.0.0' to implementation 'com.google.mlkit:barcode-scanning:17.0.2' in build.gradle and Its imports in BarcodeConverter.java and VisionCameraCodeScannerPlugin.java import com.google.mlkit.vision.barcode.Barcode; to import com.google.mlkit.vision.barcode.common.Barcode;

[OnurGuersoy]

Why not creating a PR for the patch?

[jadonshubham]

@OnurGuersoy This issue is project specific. I guess. As for one of my projects this was happening and applying above fix resolved it.

But when i tried same on react native boilerplate repo with same versions( of react-native, vision-camera, reanimated and code-scanner-plugin), there it was working fine.

So, not sure if PR is even required for patch.