CODEWITHSUNDEEP
react-nativereact-native-vision-camera
PietroPutelli
PietroPutelli

Reputation: 552

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

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

Upvotes: 4

Views: 3412

Answers (4)

How To Do
How To Do

Reputation: 11

step 1 : add these lines in babel.config.js

plugins: [
    [
      'react-native-reanimated/plugin',
      {
        globals: ['__scanCodes'],
      },
    ],
  ],

than must run this :

  1. npx react-native clean
  2. rm -rf node_modules
  3. rm -rf ios/build android/build
  4. npm install
  5. npx react-native run-android

Upvotes: 0

aka_cas
aka_cas

Reputation: 1

your missing an extra array literal []

... plugins: [ [ "react-native-reanimated/plugin", { globals: ['__scanCodes'], } ] ] ...

Upvotes: 0

Vahid Najafi
Vahid Najafi

Reputation: 5243

Just add the globals: ['__scanCodes'] to your babel.config.js file as following:

...
],
[
  'react-native-reanimated/plugin',
  {
    globals: ['__scanCodes'],
  },
],
...

Then yarn start --reset-cache and rebuild the application.

Upvotes: 0

Kirill Novikov
Kirill Novikov

Reputation: 3067

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"
        />
  )
}

Upvotes: 2

Related Questions