🐛 App crashes when passing frameProcessor prop to <Camera />

[Moatezz]

What were you trying to do?

when passing the frame processor the application crashes instantly and it also crashes when using other frame processors : vision-camera-dynamsoft-barcode-reader

I'm using VS code on Windows so XCode has nothing to do with this cursh like simillar issues regarding frame processors

here is my package.json

 {
  "name": "someapp",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint . --ext .js,.jsx,.ts,.tsx"
  },
  "dependencies": {
    "@react-native-community/datetimepicker": "^6.5.3",
    "@realm/react": "^0.4.0",
    "date-fns": "^2.29.3",
    "react": "18.1.0",
    "react-native": "0.70.4",
    "react-native-gesture-handler": "^2.8.0",
    "react-native-svg": "^13.4.0",
    "react-native-vision-camera": "^2.15.2",
    "react-router-native": "^6.4.2",
    "realm": "^11.0.0",
    "vision-camera-code-scanner": "0.2.0"
    "react-native-reanimated": "2.12.0"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@babel/runtime": "^7.12.5",
    "@react-native-community/eslint-config": "^2.0.0",
    "@tsconfig/react-native": "^2.0.2",
    "@types/jest": "^26.0.23",
    "@types/react": "^18.0.21",
    "@types/react-native": "^0.70.6",
    "@types/react-test-renderer": "^18.0.0",
    "babel-jest": "^26.6.3",
    "jest": "^26.6.3",
    "metro-react-native-babel-preset": "0.72.3",
    "react-test-renderer": "18.1.0",
    "typescript": "^4.8.3"
  },
  "jest": {
    "preset": "react-native",
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js",
      "jsx",
      "json",
      "node"
    ]
  }
}

Reproduceable Code

App.tsx

import * as React from 'react';

import {StyleSheet, Text} from 'react-native';
import {useCameraDevices} from 'react-native-vision-camera';
import {Camera} from 'react-native-vision-camera';
import {useScanBarcodes, BarcodeFormat} from 'vision-camera-code-scanner';

export default function App() {
  const [hasPermission, setHasPermission] = React.useState(false);
  const devices = useCameraDevices();
  const device = devices.back;

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

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

  return (
    device != null &&
    hasPermission && (
      <>
        <Camera
          style={StyleSheet.absoluteFill}
          device={device}
          isActive={true}
          frameProcessor={frameProcessor}
          frameProcessorFps={5}
          zoom={device?.neutralZoom ?? 1}
        />
        {barcodes.map((barcode, idx) => (
          <Text key={idx} style={styles.barcodeTextURL}>
            {barcode.displayValue}
          </Text>
        ))}
      </>
    )
  );
}

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

index.js

/**
 * @format
 */
import 'react-native-reanimated';
import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => App);

babel.config.js

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [
    [
      'react-native-reanimated/plugin',
      {
        globals: ['__scanCodes'],
      },
    ],
  ],
};

What happened instead?

The app crashes with no errors or logs

Relevant log output

no log output instant crush

Device

Samsung M42 Android 12

VisionCamera Version

2.15.2

Additional information

• [ ] I am using Expo
• [X] I have read the Troubleshooting Guide
• [X] I agree to follow this project's Code of Conduct
• [X] I searched for similar issues in this repository and found none.

[Moatezz]

Resloved by running npx react-native start --reset-cache

[nduyvu1511]

Resloved by running npx react-native start --reset-cache

Thanks a lot

[mrousavy]

Hey!

JFYI; VisionCamera V3 now includes a QR/Barcode Scanner! 😍 Check out the CodeScanner Documentation 🚀

Try upgrading to V3 if you can, it has a much more stable yet flexible foundation.

If you appreciate me dedicating my free time to improving VisionCamera and implementing features like the Code Scanner, please consider sponsoring me on GitHub 💖 to show your support.

[Moatezz]

Hey!

JFYI; VisionCamera V3 now includes a QR/Barcode Scanner! 😍 Check out the CodeScanner Documentation 🚀

Try upgrading to V3 if you can, it has a much more stable yet flexible foundation.

If you appreciate me dedicating my free time to improving VisionCamera and implementing features like the Code Scanner, please consider sponsoring me on GitHub 💖 to show your support.

nice job, it'll help us a lot