__scanCodes is not defined vision-camera-code-scanner [React Native]

Question

I'm getting the following error, as a lot of other people report on issues.

__scanCodes is not defined 

It occurs both on iOS and Android.

Here's my libraries version:

"react-native": "^0.70.6",
"react-native-vision-camera": "^2.15.2",
"vision-camera-code-scanner": "^0.2.0",
"react-native-reanimated": "^2.13.0",

And finally the babel.config.js

module.exports = {
  presets: ["module:metro-react-native-babel-preset"],
  plugins: [
    ["react-native-reanimated/plugin", { globals: ["__scanCodes"] }],
    "module:react-native-dotenv",
  ],
};

I have also tried to patch react-native-vision-camera, following this instructions: https://github.com/rodgomesc/vision-camera-code-scanner/issues/79#issuecomment-1278937809

Here's the code I'm using:

const [frameProcessor, barcodes] = useScanBarcodes([BarcodeFormat.QR_CODE], { checkInverted: true });

And here's the Xcode error:

Developer/Xcode/DerivedData/Real-cktefjzimocjmeeqhtpyfxgfpixu/Build/Products/Debug-iphoneos/vision-camera-code-scanner/vision_camera_code_scanner.modulemap' not found

Does someone have a solution for this issue? Or does a patch exist to solve the problem? Thank you

Answer 1

I had the same issue, I don't know why useScanBarcodes hook is not working. Working solution is like:

import {
  Camera,
  useCameraDevices,
  useFrameProcessor,
} from 'react-native-vision-camera';
import { scanBarcodes, BarcodeFormat } from 'vision-camera-code-scanner';

const CameraView = () => {
  const devices = useCameraDevices();
  const device = devices.back;
  const frameProcessor = useFrameProcessor(
    frame => {
      'worklet';
      const detectedBarcodes = scanBarcodes(frame, [BarcodeFormat. QR_CODE], {checkInverted: true });
      const barcode = detectedBarcodes[0];
      if (barcode) { {
        runOnJS(setBarcodes)(barcode);
      }
    },
    [],
  );

  return (
        <CameraView
          device={device}
          isActive={true}
          frameProcessor={frameProcessor}
          frameProcessorFps={5}
          orientation="portrait"
        />
  )
}