__scanCodes is not defined vision-camera-code-scanner [React Native] - 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"
/>
)
}