Latest RN 0.69 on iOS: (0,_.scanBarcodes) is not a function

[netzwerg]

Using the latest RN 0.69, I get the following error on iOS:

Frame Processor threw an error: (0,_.scanBarcodes) is not a function. (In '(0,_.scanBarcodes)(frame,types,options)', '(0,_.scanBarcodes)' is undefined)
In: _f@/Users/xxx/node_modules/vision-camera-code-scanner/lib/commonjs/hook.js (18:73):1:137
    @[native code]
    _f@/Users/xxx/node_modules/react-native-vision-camera/lib/commonjs/hooks/useFrameProcessor.js (31:33):1:425
    @[native code]

package.json

"react-native-reanimated": "^2.8.0",
"react-native-vision-camera": "^2.13.5",
"vision-camera-code-scanner": "^0.2.0"

I get the same error if I don't use the useScanBarcodes hook, but invoke useFrameProcessor myself:

const frameProcessor = useFrameProcessor((frame) => {
    'worklet';
    const detectedBarcodes = scanBarcodes(frame, types, options);
    runOnJS(setBarcodes)(detectedBarcodes);
  }, []);

[rajjsajnani]

I'm also have the same issue, I have created a private package so it can be used across the companies multiple projects.

From my example build it works fine, but when I try to integrate it with the company's project it gives me this error.

[saidybarry]

Any solution regarding this issue so far guys.

[kierancrown]

I'm also experiencing this issue

[vidkreca-inova]

Same problem on Android, haven't tested iOS.

[whalemare]

Same on react-native 0.69.1, this is the last library I can't update 😿

[thelastwizardOC]

Hello, have you found any solution for the problem?

[kierancrown]

Hello, have you found any solution for the problem?

Unfortunately not. I don’t see much if any progress being made in this matter either. I think I’m going to have to use the deprecated rn-camera package instead :(

[taduyde]

the same issue, any update?

[taduyde]

I use this way, it's worked // Alternatively you can use the underlying function: // const frameProcessor = useFrameProcessor((frame) => { 'worklet'; const detectedBarcodes = scanBarcodes(frame, [BarcodeFormat.QR_CODE], { checkInverted: true }); runOnJS(setBarcodes)(detectedBarcodes); }, []);

[kierancrown]

I use this way, it's worked // Alternatively you can use the underlying function: // const frameProcessor = useFrameProcessor((frame) => { 'worklet'; const detectedBarcodes = scanBarcodes(frame, [BarcodeFormat.QR_CODE], { checkInverted: true }); runOnJS(setBarcodes)(detectedBarcodes); }, []);

RN Version?

[cemocanon]

Aynı sorun, herhangi bir güncelleme var mı?

[waweru-kamau]

Getting the same issue. Any update?

[sepeterson]

I was able to get around this issue by recreating scanBarcodes in my component. The whole thing looks something like this:

import 'react-native-reanimated';
import React, { FunctionComponent, useEffect, useCallback, useRef, useState } from 'react';
import { StyleSheet, Text } from 'react-native';
import { Camera, useCameraDevices, useFrameProcessor } from 'react-native-vision-camera';
import type { Frame } from 'react-native-vision-camera';
import { BarcodeFormat } from 'vision-camera-code-scanner';
import type { CodeScannerOptions, Barcode } from 'vision-camera-code-scanner';
import { runOnJS } from 'react-native-reanimated';

interface Props {
  children: React.ReactNode;
  torch: boolean;
}

export const ScannerCamera: FunctionComponent<Props> = ({ children, torch }) => {
  const devices = useCameraDevices();
  const device = devices.back;
  const camera = useRef<Camera>(null);
  const [barcodes, setBc] = useState<Barcode[]>([]);

  function scanBarcodes(frame: Frame, types: BarcodeFormat[], options?: CodeScannerOptions): Barcode[] {
    'worklet';
    // @ts-ignore
    // eslint-disable-next-line no-undef
    return __scanCodes(frame, types, options);
  }

  const frameProcessor = useFrameProcessor((frame) => {
    'worklet';
    const detectedBarcodes = scanBarcodes(frame, [BarcodeFormat.QR_CODE], { checkInverted: true });
    runOnJS(setBc)(detectedBarcodes);
  }, []);

  const [hasPerms, setPerms] = React.useState(false);
  const [permsGotten, setPermsGotten] = React.useState(false);

  const requestPermissions = useCallback(async () => {
    const permission = await Camera.requestCameraPermission();
    setPerms(permission === 'authorized');
    setPermsGotten(true);
  }, []);

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

  if (!permsGotten) return <Text>loading</Text>;
  if (device === undefined || !hasPerms) return <Text>no perms</Text>;
  return (
    <>
      <Camera
        ref={camera}
        style={StyleSheet.absoluteFill}
        device={device}
        isActive={true}
        torch={torch ? 'on' : 'off'}
        frameProcessor={frameProcessor}
        frameProcessorFps={5}
      >
        {children}
      </Camera>
      {barcodes.map((barcode, idx) => (
        <Text key={idx} style={styles.barcodeTextURL}>
          {barcode.displayValue}
        </Text>
      ))}
    </>
  );
};

const styles = StyleSheet.create({
  barcodeTextURL: {
    fontSize: 20,
    color: 'white',
    fontWeight: 'bold',
  },
});