react-native-vision-camera: 🐛 Reanimated not found, Frame Processors are disabled.

@hieuplasma find this block and replace condition pre_install do |installer| installer.pod_targets.each do |pod| if pod.name.eql?('vision-camera-code-scanner') || pod.name.eql?('VisionCamera') def pod.build_type Pod::BuildType.static_library end end end end

Try to add if pod.name.eql?('vision-camera-code-scanner') || pod.name.eql?('VisionCamera') || pod.name.eql?('RNReanimated')

I’ve tried some combinations and finally fix this using:

“react-native-reanimated”: “2.17.0”, “react-native-vision-camera”: “2.15.2”, “vision-camera-code-scanner”: “0.2.0”

IOS: 16.4 Android: +9

Note: Delete -XX:MaxPermSize=512m from gradle.properties

Good luck !

In my case,

My project includes:

"react": "17.0.1",
"react-native": "0.64.4",

"@react-native-firebase/analytics": "^17.5.0",
"@react-native-firebase/app": "^17.5.0",
"@react-native-firebase/dynamic-links": "^17.5.0",
"@react-native-firebase/messaging": "^17.5.0",

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

Podfile:

#  use_frameworks! :linkage => :static
#  $RNFirebaseAsStaticFramework = true
  $RNFirebaseAnalyticsWithoutAdIdSupport=true
  $FirebaseSDKVersion = '10.7.0'
  pod 'FirebaseCore', :modular_headers => true
  pod 'GTMSessionFetcher', :modular_headers => true
  pod 'FirebaseCoreExtension', :modular_headers => true
  pod 'FirebaseAuthInterop', :modular_headers => true
  pod 'FirebaseAppCheckInterop', :modular_headers => true
  pod 'GoogleUtilities', :modular_headers => true
  pod 'vision-camera-code-scanner', :path => '../node_modules/vision-camera-code-scanner'

And it worked for some days in struggles. Hope this will help someone.

Hello, guys! I’m pass for issue, which the frameProcessor can’t turn because reanimated V3 is not installed, however, already installed reanimated. Too the plugin are issue. Can anyone help me? Follow my code:

Imported: import React, { useState, useEffect } from ‘react’; import { Text, View, Button, TouchableOpacity, Alert } from ‘react-native’; import firestore from ‘@react-native-firebase/firestore’; import { Picker } from ‘@react-native-picker/picker’; import styles from ‘./styles’; import { NavigationContainer, useRoute } from ‘@react-navigation/native’; import { createStackNavigator } from ‘@react-navigation/stack’; import { TextInput } from ‘react-native-paper’; import MaterialCommunityIcons from ‘react-native-vector-icons/MaterialCommunityIcons’; import {Camera, useCameraDevices, useFrameProcessor} from ‘react-native-vision-camera’; import { runOnJS } from ‘react-native-reanimated’; import{ scanOCR } from ‘vision-camera-ocr’;

Code: const Cameracode = ({ navigation }) => { const [device, setDevice] = useState(null); const devices = useCameraDevices(); const [text, setText] = useState(‘’);

const frameProcessor = useFrameProcessor((frame)=>{ ‘worklet’; const data = scanOCR(frame);

runOnJS(setText)(data.result.text);

}, []);

useEffect(() => { const fetchCameraDevice = async () => { const newCameraPermission = await Camera.requestCameraPermission(); console.log(‘Camera permission status:’, newCameraPermission);

  console.log('Devices:', devices);

  const cameraDevice = devices.back; 
  setDevice(cameraDevice);
};

fetchCameraDevice();

}, [devices]);

return ( <View style={styles.cameraContainer}> {device && ( <Camera style={styles.cameraPreview} device={device} isActive={true} frameProcessor={frameProcessor} /> )} </View> ); };

Babel: module.exports = function(api) { api.cache(true); return{ presets: [‘module:metro-react-native-babel-preset’], plugins: [ [‘react-native-reanimated/plugin’, { globals: [‘__scanOCR’], } ], ],
}; };

dependencies:
“dependencies”: { “@react-native-firebase/app”: “^18.1.0”, “@react-native-firebase/database”: “^18.1.0”, “@react-native-firebase/firestore”: “^18.1.0”, “@react-native-picker/picker”: “^2.4.10”, “@react-navigation/bottom-tabs”: “^6.5.7”, “@react-navigation/material-top-tabs”: “^6.6.3”, “@react-navigation/native”: “^6.1.6”, “@react-navigation/stack”: “^6.3.17”, “accordion-collapse-react-native”: “^1.1.1”, “date-fns”: “^2.30.0”, “native-base”: “^3.4.28”, “react”: “18.2.0”, “react-native”: “0.71.8”, “react-native-autocomplete-dropdown”: “^3.0.2”, “react-native-collapsible”: “^1.6.1”, “react-native-gesture-handler”: “^2.12.0”, “react-native-modal-filter-picker”: “^2.1.0”, “react-native-pager-view”: “^6.2.0”, “react-native-paper”: “^5.9.1”, “react-native-picker-select”: “^8.0.4”, “react-native-progress-steps”: “^1.3.4”, “react-native-reanimated”: “^3.5.4”, “react-native-safe-area-context”: “^4.5.3”, “react-native-screens”: “^3.20.0”, “react-native-searchable-dropdown”: “^1.1.3”, “react-native-searchable-picker”: “^1.0.5”, “react-native-vector-icons”: “^9.2.0”, “react-native-vision-camera”: “^2.15.4”, “react-navigation”: “^4.4.4”, “vision-camera-ocr”: “^1.0.0” }, “devDependencies”: { “@babel/core”: “^7.20.0”, “@babel/preset-env”: “^7.20.0”, “@babel/runtime”: “^7.20.0”, “@react-native-community/eslint-config”: “^3.2.0”, “@tsconfig/react-native”: “^2.0.2”, “@types/jest”: “^29.2.1”, “@types/react”: “^18.0.24”, “@types/react-test-renderer”: “^18.0.0”, “babel-jest”: “^29.2.1”, “eslint”: “^8.19.0”, “jest”: “^29.2.1”, “metro-react-native-babel-preset”: “0.73.9”, “prettier”: “^2.4.1”, “react-test-renderer”: “18.2.0”, “typescript”: “4.8.4” }, “jest”: { “preset”: “react-native” } }

Error:

let workletRuntime = null let createWorklet = () => { throw new Error(“Reanimated V3 is not installed, Frame Processors are not available!”) }

try { const reanimated = require(‘react-native-reanimated’) if (reanimated.createWorkletRuntime == null) { console.warn(“Frame Processors are disabled because you’re using an incompatible version of Reanimated.”) } workletRuntime = reanimated.createWorkletRuntime(‘VisionCamera’) createWorklet = reanimated.makeShareableCloneRecursive } catch { // Frame Processors are not enabled }

export const FrameProcessorContext = { workletRuntime: workletRuntime, createWorklet: createWorklet }

This error too:

  throw new Error(`[Reanimated] Tried to synchronously call a non-worklet function on the UI thread.

See `https://docs.swmansion.com/react-native-reanimated/docs/guides/troubleshooting#tried-to-synchronously-call-a-non-worklet-function-on-the-ui-thread\` for more details.`); }; fun.__remoteFunction = objectToUnpack; return fun; } else { throw new Error(‘[Reanimated] Data type not recognized by value unpacker.’); } }

type ValueUnpacker = WorkletFunction< [objectToUnpack: any, category?: string], any

;

if (DEV && IS_NATIVE) { if (!(‘__workletHash’ in valueUnpacker)) { throw new Error(‘[Reanimated] valueUnpacker is not a worklet’); } const closure = (valueUnpacker as ValueUnpacker).__closure; if (closure !== undefined && Object.keys(closure).length !== 0) { throw new Error(‘[Reanimated] valueUnpacker must have empty closure’); } }

export function getValueUnpackerCode() { return (valueUnpacker as ValueUnpacker).__initData.code; }

Exist other lib which make this? I’m see which camera vision with many problems

if pod.name.eql?(‘vision-camera-code-scanner’) || pod.name.eql?(‘VisionCamera’) || pod.name.eql?(‘RNReanimated’)

nice mate, u save my day, tks so much!

@hieuplasma show your Podfile pls!

same issue. react-native-reanimated@2.14.1