Does not work. Doesn't recognize QR code

[amanzrx4]

It's weird, may be missing some config but this library just does not work. barcodes always show empty array. I've tried multiple times.

My config:

"react-native": "0.71.0",
 "react-native-reanimated": "^2.14.4",
"react-native-vision-camera": "^2.15.4",
"vision-camera-code-scanner": "^0.2.0",

babel.config.js

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

[alexrififi]

I've tried multiple times

Show exactly how

[amanzrx4]

@alexrififi I tried the setup following the docs, camera and everything works but NOTHING happens when i bring barcode/qrcode in front of the camera

[ktsaif]

same issue here, I also followed the doc and set up all, I am sure it detects the barcode but barcodes/detected barcodes getting an empty array / undefined simultaneously,

[matheusmhq]

On hook useScanBarcodes, you need pass a array of types, try change the bar code format passed.

These are the options available

export declare enum BarcodeFormat {
    UNKNOWN = -1,
    ALL_FORMATS = 0,
    CODE_128 = 1,
    CODE_39 = 2,
    CODE_93 = 4,
    CODABAR = 8,
    DATA_MATRIX = 16,
    EAN_13 = 32,
    EAN_8 = 64,
    ITF = 128,
    QR_CODE = 256,
    UPC_A = 512,
    UPC_E = 1024,
    PDF417 = 2048,
    AZTEC = 4096
}

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

[amanzrx4]

Did it, infact I'm trying the exact component that's given in example but still it's not working. It's not even detecting the barcode, the component is not re rendered at all @matheusmhq

[kierangillen]

I'm also seeing the same issue.

[kierangillen]

Switching to using the worklet hook fixed the issue.

import React, { useEffect, useState } from "react"
import { Image, View } from "react-native"
import { useQRData } from "app/hooks/useQRAddress"
import { Camera, useCameraDevices, useFrameProcessor } from "react-native-vision-camera"
import { useNavigation } from "app/navigation/schema"
import { scanBarcodes, BarcodeFormat, Barcode } from "vision-camera-code-scanner"
import { runOnJS } from "react-native-reanimated"

export const QRScanner: React.FC = () => {
  const navigation = useNavigation()
  const { setQRData } = useQRData()
  const [hasPermission, setHasPermission] = React.useState(false)
  const devices = useCameraDevices()
  const device = devices.back
  const [barcodes, setBarcodes] = useState<Barcode[]>([])

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

  const requestPermissions = async () => {
    const status = await Camera.requestCameraPermission()
    setHasPermission(status === "authorized")
  }

  useEffect(() => {
    requestPermissions()
  }, [])

  useEffect(() => {
    if (barcodes.length > 0) {
      setQRData(barcodes[0].displayValue)
      navigation.goBack()
    }
  }, [barcodes, navigation, setQRData])

  return (
    <View style={{ flex: 1 }}>
      {device !== null && hasPermission && (
        <>
          <Camera
            device={device}
            isActive={true}
            frameProcessor={frameProcessor}
            frameProcessorFps={5}
            style={{ position: "absolute", top: 0, left: 0, right: 0, bottom: 0 }}
          />
          <Image
            source={require("../../assets/images/overlay.png")}
            style={{ height: "100%", width: "100%", position: "absolute", top: 0, zIndex: 100 }}
          />
        </>
      )}
    </View>
  )
}

[amanzrx4]

this works. Thanks @kierangillen