react-native-vision-camera: Can not use react-native-vision-camera frameProcessor to scan QR codes 🐛

What’s happening?

When using react native vision camera frameProcessor property in order to scan QR codes (combined with vision-camera-code-scanner), I get the following android error when navigating to the screen that renders the camera view (app builds correctly):

java.lang.UnsatisfiedLinkError: No implementation found for void com.mrousavy.camera.CameraView.frameProcessorCallback(androidx.camera.core.ImageProxy) (tried Java_com_mrousavy_camera_CameraView_frameProcessorCallback and Java_com_mrousavy_camera_CameraView_frameProcessorCallback__Landroidx_camera_core_ImageProxy_2)

and then the app dies.

Fun fact is that without using the frameProcessor prop, everything works fine.

This error happens without installing the library react-native-worklets-core and adding to babel.config.js: ['react-native-worklets-core/plugin']

On the other hand, If I add react-native-worklets-core and its babel config line, I get a different error and I can’t even build the app:

What went wrong:
Could not determine the dependencies of task ':react-native-worklets-core:compileDebugAidl'.
> Could not resolve all task dependencies for configuration ':react-native-worklets-core:debugCompileClasspath'.
  > Could not find com.facebook.react:react-android:.
    Required by:
        project :react-native-worklets-core
  > Could not find com.facebook.react:hermes-android:.
    Required by:
        project :react-native-worklets-core

I have looked at this two similar bug reports and tried everything explained there but the issue persists and I am not finding a solution… https://github.com/mrousavy/react-native-vision-camera/issues/1463 https://github.com/mrousavy/react-native-vision-camera/issues/1097

Reproduceable Code

import { useIsFocused } from '@react-navigation/native'
import { BarcodeFormat, Barcode, scanBarcodes } from 'vision-camera-code-scanner'

import React, { useEffect, useState } from 'react'
import { StyleSheet } from 'react-native'
import { runOnJS } from 'react-native-reanimated'
import { useCameraDevices, useFrameProcessor } from 'react-native-vision-camera'
import { Camera } from 'react-native-vision-camera'

import { LoaderComponent } from '#components/loader'

export const QRReader = () => {
  const [hasPermission, setHasPermission] = React.useState(false)
  const devices = useCameraDevices()
  const device = devices.back
  const [barcodes, setBarcodes] = useState<Barcode[]>([])
  const isFocused = useIsFocused()

  console.log('hasPermission', hasPermission)

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

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

  useEffect(() => {
    const setCameraPermission = async () => {
      const status = await Camera.requestCameraPermission()
      setHasPermission(status === 'authorized')

      const cameraPermission = await Camera.getCameraPermissionStatus()
      console.log('cameraPermission', cameraPermission)
    }

    setCameraPermission()
  }, [])

  if (device == null) {
    return <LoaderComponent />
  }

  return (
    <Camera
      style={StyleSheet.absoluteFill}
      device={device}
      isActive={isFocused}
      frameProcessor={frameProcessor}
      frameProcessorFps={5}
    />
  )
}

Relevant log output

java.lang.UnsatisfiedLinkError: No implementation found for void com.mrousavy.camera.CameraView.frameProcessorCallback(androidx.camera.core.ImageProxy) (tried Java_com_mrousavy_camera_CameraView_frameProcessorCallback and Java_com_mrousavy_camera_CameraView_frameProcessorCallback__Landroidx_camera_core_ImageProxy_2)

FATAL EXCEPTION: pool-28-thread-1
Process: myApp.dev, PID: 22643
java.lang.UnsatisfiedLinkError: No implementation found for void com.mrousavy.camera.CameraView.frameProcessorCallback(androidx.camera.core.ImageProxy) (tried Java_com_mrousavy_camera_CameraView_frameProcessorCallback and Java_com_mrousavy_camera_CameraView_frameProcessorCallback__Landroidx_camera_core_ImageProxy_2)
	at com.mrousavy.camera.CameraView.frameProcessorCallback(Native Method)
	at com.mrousavy.camera.CameraView.configureSession$lambda-7$lambda-6(CameraView.kt:491)
	at com.mrousavy.camera.CameraView.$r8$lambda$cqtIchEZdTZaV3R0UUrDpVbB1Es(Unknown Source:0)
	at com.mrousavy.camera.CameraView$$ExternalSyntheticLambda1.analyze(Unknown Source:2)
	at androidx.camera.core.ImageAnalysis.lambda$setAnalyzer$2(ImageAnalysis.java:476)
	at androidx.camera.core.ImageAnalysis$$ExternalSyntheticLambda0.analyze(Unknown Source:2)
	at androidx.camera.core.ImageAnalysisAbstractAnalyzer.lambda$analyzeImage$0$androidx-camera-core-ImageAnalysisAbstractAnalyzer(ImageAnalysisAbstractAnalyzer.java:285)
	at androidx.camera.core.ImageAnalysisAbstractAnalyzer$$ExternalSyntheticLambda1.run(Unknown Source:14)
	at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1137)
	at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:637)
	at java.lang.Thread.run(Thread.java:1012)

Camera Device

{
  "formats": [],
  "maxZoom": 10,
  "minZoom": 1,
  "supportsLowLightBoost": false,
  "supportsDepthCapture": false,
  "neutralZoom": 1,
  "supportsFocus": true,
  "supportsRawCapture": false,
  "hasFlash": false,
  "name": "back (0)",
  "supportsParallelVideoProcessing": false,
  "isMultiCam": false,
  "hasTorch": false,
  "devices": [
    "telephoto-camera"
  ],
  "position": "back",
  "id": "0"
}

Package json dependencies:

{
  "dependencies": {
    "@babel/plugin-proposal-private-methods": "^7.18.6",
    "@casl/ability": "^6.1.1",
    "@casl/react": "^3.1.0",
    "@datadog/mobile-react-native": "^1.0.0",
    "@datadog/mobile-react-navigation": "^1.0.0",
    "@formatjs/intl-datetimeformat": "^6.2.0",
    "@formatjs/intl-getcanonicallocales": "^2.0.4",
    "@formatjs/intl-locale": "^3.0.6",
    "@formatjs/intl-numberformat": "^8.1.3",
    "@formatjs/intl-pluralrules": "^5.1.3",
    "@nunogois/proxy-client-react-native": "^0.0.28",
    "@react-native-async-storage/async-storage": "^1.17.10",
    "@react-native-community/clipboard": "^1.5.1",
    "@react-native-community/netinfo": "^9.3.0",
    "@react-native-firebase/app": "^14.9.3",
    "@react-native-firebase/database": "^14.9.3",
    "@react-native-firebase/messaging": "^14.9.3",
    "@react-native-masked-view/masked-view": "0.2.0",
    "@react-native-picker/picker": "^2.4.4",
    "@react-navigation/bottom-tabs": "^6.5.8",
    "@react-navigation/drawer": "^6.4.4",
    "@react-navigation/native": "^6.0.12",
    "@react-navigation/native-stack": "^6.8.0",
    "@segment/analytics-react-native": "^2.7.1",
    "@segment/sovran-react-native": "^0.4.4",
    "@sentry/react-native": "^4.2.4",
    "consistencss": "^1.7.0",
    "date-fns-tz": "^1.3.6",
    "deprecated-react-native-prop-types": "2.2.0",
    "formik": "^2.2.9",
    "i18next": "^21.9.1",
    "lottie-ios": "3.4.0",
    "lottie-react-native": "5.1.4",
    "patch-package": "^6.4.7",
    "postinstall-postinstall": "^2.1.0",
    "react": "18.1.0",
    "react-i18next": "^11.18.5",
    "react-native": "0.70.9",
    "react-native-autolink": "^4.0.0",
    "react-native-calendars": "^1.1288.2",
    "react-native-code-push": "^7.0.5",
    "react-native-device-info": "^10.0.2",
    "react-native-dotenv": "^3.3.1",
    "react-native-email-link": "^1.14.1",
    "react-native-error-boundary": "^1.1.15",
    "react-native-eva-icons": "^1.3.1",
    "react-native-event-listeners": "^1.0.7",
    "react-native-fast-image": "^8.6.0",
    "react-native-flipper": "^0.162.0",
    "react-native-gesture-handler": "^2.6.0",
    "react-native-image-picker": "^5.4.2",
    "react-native-keyboard-manager": "4.0.13-17",
    "react-native-linear-gradient": "^2.6.2",
    "react-native-localize": "^2.2.3",
    "react-native-mmkv": "2.5.1",
    "react-native-mmkv-flipper-plugin": "^1.0.0",
    "react-native-modal": "^13.0.1",
    "react-native-offline": "^6.0.0",
    "react-native-pager-view": "^5.4.25",
    "react-native-picker-select": "^8.0.4",
    "react-native-reanimated": "^2.13.0",
    "react-native-restart": "^0.0.24",
    "react-native-safe-area-context": "^4.3.3",
    "react-native-screens": "^3.17.0",
    "react-native-select-dropdown": "^3.3.3",
    "react-native-shadow-2": "6.0.5",
    "react-native-share": "^7.9.0",
    "react-native-snackbar": "^2.4.0",
    "react-native-snap-carousel": "^3.9.1",
    "react-native-svg": "^12.3.0",
    "react-native-switch-selector-fix": "^2.0.4",
    "react-native-tab-view": "^3.1.1",
    "react-native-vector-icons": "^9.2.0",
    "react-native-vision-camera": "^2.16.1",
    "react-native-walkthrough-tooltip": "^1.3.1",
    "react-native-webp-format": "^1.1.2",
    "react-native-webview": "^11.23.0",
    "react-query": "^3.39.2",
    "styled-components": "^5.3.6",
    "ts-jest": "^27",
    "unleash-proxy-client": "^2.3.0",
    "vision-camera-code-scanner": "0.2.0",
    "yup": "^0.32.11"
  },
  "devDependencies": {
    "@babel/core": "^7.18.13",
    "@babel/preset-typescript": "^7.18.6",
    "@babel/runtime": "^7.18.9",
    "@commitlint/cli": "^17.1.2",
    "@commitlint/config-conventional": "^17.1.0",
    "@react-native-community/eslint-config": "^3.1.0",
    "@testing-library/react-native": "^11.1.0",
    "@trivago/prettier-plugin-sort-imports": "^3.3.0",
    "@types/jest": "^29.0.0",
    "@types/lodash": "^4.14.184",
    "@types/react": "^17.0.43",
    "@types/react-native": "^0.67.4",
    "@types/react-native-auth0": "^2.13.1",
    "@types/react-native-calendars": "^1.1264.3",
    "@types/react-native-restart": "^0.0.14",
    "@types/react-native-share": "^3.3.3",
    "@types/react-test-renderer": "^17.0.1",
    "@types/styled-components-react-native": "^5.2.1",
    "@typescript-eslint/eslint-plugin": "^5.36.0",
    "appcenter-cli": "^2.11.0",
    "babel-jest": "^27",
    "babel-plugin-module-resolver": "^4.1.0",
    "eslint": "^7.32.0",
    "eslint-import-resolver-babel-module": "^5.3.1",
    "eslint-plugin-detox": "^1.0.0",
    "eslint-plugin-import": "^2.26.0",
    "eslint-plugin-jest": "^27.0.1",
    "eslint-plugin-prettier": "^4.2.1",
    "husky": "^8.0.1",
    "jest": "^27",
    "metro-react-native-babel-preset": "0.72.3",
    "prettier": "^2.7.1",
    "react-native-flipper-performance-plugin": "^0.3.1",
    "react-test-renderer": "18.1.0",
    "standard-version": "^9.5.0",
    "typescript": "^4.8.2"
  },
}

Device

Android Pixel 4 api 31

VisionCamera Version

^2.16.1

Can you reproduce this issue in the VisionCamera Example app?

Yes, I can reproduce the same issue in the Example app here

Additional information

About this issue

  • Original URL
  • State: closed
  • Created 9 months ago
  • Reactions: 5
  • Comments: 15 (3 by maintainers)

Most upvoted comments

It is a fork that the team I am working with was using. Probably using the one you have right now won’t impact. The breaking change is in “react-native-vision-camera” from 2.15.6 to 2.16.1 because they changed from CameraX to Camera2 image

+4
JorgeQuevedoC on Sep 27, 2023

I was facing the exact same problem, curious enough. I tried with specific package versions and it worked:

“react-native-vision-camera”: “2.15.6” “react-native-reanimated”: “2.17.0” “vision-camera-code-scanner”: “github:jorgebrunetto/vision-camera-code-scanner”

You can try and see if this works for you too

+3
JorgeQuevedoC on Sep 27, 2023

I have the same issue while using vision-camera-code-scanner. need help

+3
PranatoshRoy on Sep 22, 2023

I was facing the exact same problem, curious enough. I tried with specific package versions and it worked: “react-native-vision-camera”: “2.15.6” “react-native-reanimated”: “2.17.0” “vision-camera-code-scanner”: “github:jorgebrunetto/vision-camera-code-scanner” You can try and see if this works for you too

@JorgeQuevedoC what version of React Native are you using?

“react-native”: “0.69.7”,

+1
JorgeQuevedoC on Sep 29, 2023

I was facing the exact same problem, curious enough. I tried with specific package versions and it worked: “react-native-vision-camera”: “2.15.6” “react-native-reanimated”: “2.17.0” “vision-camera-code-scanner”: “github:jorgebrunetto/vision-camera-code-scanner” You can try and see if this works for you too

@JorgeQuevedoC what version of React Native are you using?

Ey @drastus! In my case I am using the version 0.70.9 and with the libraries versions that @JorgeQuevedoC suggested everything is working now! 😄

+1
fvalles on Sep 29, 2023
Read more comments on GitHub
← react-native-vision-camera: App Crashes when frameProcessor prop used🐛
react-native-vision-camera: CLANG_CXX_LANGUAGE_STANDARD mismatch for iOS podspecs →