Android: Frame Processor threw an error: undefined is not a function

Hi! First of all thanks for the lib! I’d like to start moving from the react-native-camera to react-native-vision-camera so the one of my app features is to read a barcode coded in EAN13 so this library fits my needs.

However I’m facing a strange issue, the frame processor is throwing an error all the time Frame Processor threw an error: undefined is not a function. All the configuration (especially the one related to react-reanimated) is done properly. The app is running fine and it compiles without errors.

babel.config.js

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    [
      'module-resolver',
      {
        root: ['./'],
        extensions: ['.ios.js', '.android.js', '.js', '.ts', '.tsx', '.json'],
        alias: {
          res: './src/res',
        },
      },
    ],
    [
      'react-native-reanimated/plugin',
      {
        globals: ['__scanCodes'],
      },
    ],
  ],
}

Component

import React, { useEffect, useLayoutEffect, useMemo, useState } from 'react'
import { StatusBar } from 'react-native'
import styles from './GrantedPermissionsScreen.style'
import { Camera, useCameraDevices } from 'react-native-vision-camera'
import LoadingView from 'src/components/molecules/loadingView/LoadingView'
import Screen from 'src/components/atoms/screen/Screen'
import HeaderButton from 'src/components/molecules/headerButton/HeaderButton'
import { AvailableColors, colors } from 'res'
import IconFeather from 'react-native-vector-icons/Feather'
import Overlay from './components/overlay/Overlay'
import { CompositeNavigationProp } from '@react-navigation/core'
import { BarcodeFormat, useScanBarcodes } from 'vision-camera-code-scanner'
import { RegisterTubeRoutes, Routes } from 'src/navigators/routes'
import { RegisterTubeNavigationProp } from 'src/navigators/registerTube'
import { RootNavigationProp } from 'src/navigators'

// const ReanimatedCamera = Reanimated.createAnimatedComponent(Camera)

export interface GrantedPermissionsProps {
  navigation: CompositeNavigationProp<
    RegisterTubeNavigationProp<RegisterTubeRoutes.CameraGrantedPermissions>,
    RootNavigationProp<Routes.AddCustomer>
  >
}

const GrantedPermissionsScreen = ({ navigation }: GrantedPermissionsProps) => {
  const [hasPermission, setHasPermission] = useState(false)
  const devices = useCameraDevices()
  const device = useMemo(() => {
    return devices.back
  }, [devices])

  const [frameProcessor, barcodes] = useScanBarcodes([BarcodeFormat.QR_CODE])

  useLayoutEffect(() => {
    navigation.setOptions({
      headerTransparent: true,
      headerBackVisible: false,
      headerRight: () => {
        return (
          <HeaderButton
            variant={AvailableColors.white}
            onPress={navigation.goBack}>
            <IconFeather name="x" size={18} color={colors.white} />
          </HeaderButton>
        )
      },
    })
  }, [navigation])

  useEffect(() => {
    ;(async () => {
      const status = await Camera.requestCameraPermission()
      setHasPermission(status === 'authorized')
    })()
  }, [])

  if (!device || !hasPermission) {
    return <LoadingView />
  }

  return (
    <Screen style={styles.container}>
      <StatusBar barStyle="light-content" />

      <Camera
        style={styles.camera}
        isActive
        device={device}
        frameProcessor={frameProcessor}
        frameProcessorFps={5}
      />

      <Overlay />
    </Screen>
  )
}

export default React.memo(GrantedPermissionsScreen)

Hope someone can help me out to discover what’s happening

Thanks!

[DiegoQuiros94]

I’m having the same issue, I made it work by not using the useScanBarcodes hook and declaring the frameProcessor function:

import React, { memo, useEffect, useState } from 'react';
import 'react-native-reanimated'
import { View } from 'react-native';
import { Camera, useCameraDevices, useFrameProcessor } from 'react-native-vision-camera';
import { BarcodeFormat, scanBarcodes, Barcode } from 'vision-camera-code-scanner';
import { runOnJS } from 'react-native-reanimated';

import styles from './styles';

function QRScanner() {

  const [hasPermission, setHasPermission] = 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);
  }, []);
  
  useEffect(() => {
    (async () => {
      let status = await Camera.getCameraPermissionStatus();
      if (status === 'not-determined') {
        status = await Camera.requestCameraPermission();
      }
      setHasPermission(status === 'authorized');
    })();
  }, []);

  useEffect(() => {
    console.log(barcodes);
  }, [barcodes]);

  return (
    <View style={styles.container}>
      {device && hasPermission && <Camera
      style={styles.fill}
      device={device}
      isActive={true}
      frameProcessor={frameProcessor}
      frameProcessorFps={5}
    />}
    </View>
  );
}

export default memo(QRScanner);

[fthernan]

Disabling the debug mode worked for me.

1. Open the developer menu (pressing “d” on the metro console 👇​⌨️, or shaking 👋 your phone/device)
2. Click on “Settings” ⚙️
3. Uncheck “JS Dev Mode” 🐛 (first option)
4. Reload your app 🔃 (pressing “r” on metro console 👇​⌨️)

Hope it helps 😉​