mrousavy / react-native-vision-camera

📸 A powerful, high-performance React Native Camera library.
https://react-native-vision-camera.com
MIT License
7.55k stars 1.1k forks source link

🐛 Reanimated not found, Frame Processors are disabled. #860

Closed brascene closed 1 year ago

brascene commented 2 years ago

What were you trying to do?

I've installed this library to test barcode scanning, and since that feature is supported by different module, I've installed one of the community packages. After installing the main react-native-vision-camera, camera is working, but I could see in the XCode logs that frame processors are disabled since reanimated is not found. So I've installed reanimated (before installing mentioned scanning package), and the same message persisted in the logs. Then I've installed the scanning package, and opened the camera screen, and got the uncaught error saying the same message, that frame processors are not enabled.

Worth mentioning is that I've followed all steps regarding libs installation, also regarding reanimated and its babel plugin, import in main index file etc. Any help would be appreciated a lot.

Reproduceable Code

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

// inside the render:
            {device !== null && device !== undefined && (
              <Camera
                isActive
                style={StyleSheet.absoluteFill}
                device={device}
                frameProcessor={frameProcessor}
                frameProcessorFps={5}
              />
            )}
            )}

What happened instead?

IMG_924DD94A98DB-1

Relevant log output

Here' some logs from XCODE:

Reanimated not found, Frame Processors are disabled.

Main Thread Checker: UI API called on a background thread: -[UIWindowScene interfaceOrientation]
PID: 9272, TID: 3358064, Thread name: (none), Queue name: mrousavy/VisionCamera.main, QoS: 33

[Assert] Cannot be called with asCopy = NO on non-main thread.
=================================================================
Main Thread Checker: UI API called on a background thread: -[UIWindow windowScene]

[reports] Main Thread Checker: UI API called on a background thread: -[UIApplication windows]
PID: 9272, TID: 3358064, Thread name: (none), Queue name: mrousavy/VisionCamera.main, QoS: 33

Device

iPhone 12 Pro Max

VisionCamera Version

2.12.1

Additional information

tiempham commented 2 years ago

I'm facing this issue when using react native debugger, reanimated 2 not working when running debug. Stop it and enjoy.

brascene commented 2 years ago

I'm not using react native debugger, however I'm using Reactotron, but after removing it it's still the same.

IseeUDenis commented 2 years ago

I have also meet the same problem...

moygospadin commented 2 years ago

@IseeUDenis @brascene @tiempham any updates regarding this issue?

moygospadin commented 2 years ago

My problem was that i use use_framework! in pod file. I delete it, and added :modular_headers => true to necessary pods My podfile code

require_relative '../node_modules/react-native/scripts/react_native_pods' require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules' platform :ios, '11.0' target 'XXX' do config = use_native_modules! pre_install do |installer| Pod::Installer::Xcode::TargetValidator.send(:define_method, :verify_no_static_framework_transitive_dependencies) {} installer.pod_targets.each do |pod| if pod.name.eql?('RNPermissions') || pod.name.start_with?('Permission-') def pod.build_type; Pod::BuildType.static_library # >= 1.9 end end end end

use_react_native!( :path => config[:reactNativePath], :hermes_enabled => false )

pod 'iOSPhotoEditor', :git => 'https://github.com/vivianlys90/photo-editor', :branch => 'master' , :modular_headers => true pod 'GoogleMLKit/BarcodeScanning', '2.6.0'

permissions_path = '../node_modules/react-native-permissions/ios'

pod 'Permission-Camera', :path => "#{permissions_path}/Camera" pod 'Permission-PhotoLibrary', :path => "#{permissions_path}/PhotoLibrary"

target 'XXXTests' do inherit! :complete end

target 'XXXTestflight' do inherit! :complete end use_flipper!() post_install do |installer| react_native_post_install(installer) installer.aggregate_targets.each do |aggregate_target| aggregate_target.user_project.native_targets.each do |target| target.build_configurations.each do |config| config.build_settings['LIBRARY_SEARCH_PATHS'] = ['$(SDKROOT)/usr/lib/swift', '$(inherited)'] # or it won't build on apple silicon config.build_settings["EXCLUDED_ARCHS[sdk=iphonesimulator*]"] = "" config.build_settings['ONLY_ACTIVE_ARCH'] = 'YES' config.build_settings['VALID_ARCHS'] = 'arm64 x86_64' config.build_settings['EXCLUDED_ARCHS'] = 'i386' end end aggregate_target.user_project.save end installer.pods_project.targets.each do |target| target.build_configurations.each do |config| case target.name when 'RCT-Folly' config.build_settings['IPHONEOS_DEPLOYMENT_TARGET'] = '9.0' else config.build_settings['IPHONEOS_DEPLOYMENT_TARGET'] = $iOSMinimumDeployVersion end end end end end

emaxedon commented 1 year ago

I'm getting this same issue for Android...

bfar97 commented 1 year ago

same issue. react-native-reanimated@2.14.1

ZentPeople commented 1 year ago

I am facing same issue on iOS

brascene commented 1 year ago

Check with reanimated 2.2.4, it's working now.

luatvudinh commented 1 year ago

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.

hieuplasma commented 1 year ago

any solution? im facing this problem too :(

tiempham commented 1 year ago

@hieuplasma show your Podfile pls!

hieuplasma commented 1 year ago

@tiempham

require File.join(File.dirname(`node --print "require.resolve('expo/package.json')"`), "scripts/autolinking")
require_relative '../node_modules/react-native/scripts/react_native_pods'
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'

platform :ios, '13.0'
prepare_react_native_project!

# If you are using a `react-native-flipper` your iOS build will fail when `NO_FLIPPER=1` is set.
# because `react-native-flipper` depends on (FlipperKit,...) that will be excluded
#
# To fix this you can also exclude `react-native-flipper` using a `react-native.config.js`
# ```js
# module.exports = {
#   dependencies: {
#     ...(process.env.NO_FLIPPER ? { 'react-native-flipper': { platforms: { ios: null } } } : {}),
# ```
flipper_config = ENV['NO_FLIPPER'] == "1" ? FlipperConfiguration.disabled : FlipperConfiguration.enabled

linkage = ENV['USE_FRAMEWORKS']
if linkage != nil
  Pod::UI.puts "Configuring Pod with #{linkage}ally linked Frameworks".green
  use_frameworks! :linkage => linkage.to_sym
end

target 'luckyking_app_react' do
  use_expo_modules!
  post_integrate do |installer|
    begin
      expo_patch_react_imports!(installer)
    rescue => e
      Pod::UI.warn e
    end
  end
  config = use_native_modules!

  # Flags change depending on the env values.
  flags = get_default_flags()
  use_frameworks! :linkage => :static
  $RNFirebaseAsStaticFramework = true
  pod 'RNFBAuth', :path => '../node_modules/@react-native-firebase/auth'

  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

  use_react_native!(
    :path => config[:reactNativePath],
    # Hermes is now enabled by default. Disable by setting this flag to false.
    # Upcoming versions of React Native may rely on get_default_flags(), but
    # we make it explicit here to aid in the React Native upgrade process.
    # :hermes_enabled => false,
    :hermes_enabled => true,
    :fabric_enabled => flags[:fabric_enabled],
    # Enables Flipper.
    #
    # Note that if you have use_frameworks! enabled, Flipper will not work and
    # you should disable the next line.
    # :flipper_configuration => flipper_config,
    # An absolute path to your application root.
    :app_path => "#{Pod::Config.instance.installation_root}/.."
  )

  target 'luckyking_app_reactTests' do
    inherit! :complete
    # Pods for testing
  end

  post_install do |installer|
    react_native_post_install(
      installer,
      # Set `mac_catalyst_enabled` to `true` in order to apply patches
      # necessary for Mac Catalyst builds
      :mac_catalyst_enabled => false
    )
    __apply_Xcode_12_5_M1_post_install_workaround(installer)
  end
end

Here mate!

tiempham commented 1 year ago

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

hieuplasma commented 1 year ago

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

where should i add that line bro?

tiempham commented 1 year ago

@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

hieuplasma commented 1 year ago

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!

mrousavy commented 1 year ago

This should be fixed with the Frame Processors rewrite in V3! 🥳

tiagojenuino commented 1 year ago

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 (

{device && ( )}

); };

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

sjcuello commented 1 year ago

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 !