How do I scan a QR Code in React-Native 0.71?

Question

I'm currently using react-native-vision-camera with the vision-camera-code-scanner plugin, however when there is no barcode in front of the camera, the barcodes value is an empty array, but when a barcode is brought within view, the barcodes value is undefined. I've tried disabling debugger mode as I've read in a thread but no difference.

Note: react-native-camera is deprecated by extension so is: react-native-qrcode-scanner

I've already read this thread, no solutions there: How to scan a qr code in React Native cli?

Any help would. be appreciated

Please see code below:

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',
};

score 0 · Answer 1 · answered Jun 08 '23 at 05:53

did you add the globals: ['__scanCodes'] to your babel.config.js file as following? if don't then Add

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

I use this code as per the Document:

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);
        console.log("your barcode" , barcode)
      }
    },
    [],
  );

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

yes the globals were added to the babel.config.js, the problem i'm having is the scanBarcodes function returns undefined whenever a barcode is in the frame, so for me detectedBarcodes would be undefined, not an array, so that frame processor would error out at detectedBarcodes[0]. What versions are you on, of: react-native, react-native-vision-camera, vision-camera-code-scanner — SirFitz, Jun 08 '23 at 14:02
check this [link](https://github.com/rodgomesc/vision-camera-code-scanner) make sure that useScanBarcodes hook get frameProcessor value and try **console.log(barcode.displayValue)** — Raj Parmar, Jun 09 '23 at 04:53

How do I scan a QR Code in React-Native 0.71?

1 Answers1