Closed brascene closed 1 year ago
I'm facing this issue when using react native debugger, reanimated 2 not working when running debug. Stop it and enjoy.
I'm not using react native debugger, however I'm using Reactotron, but after removing it it's still the same.
I have also meet the same problem...
@IseeUDenis @brascene @tiempham any updates regarding this issue?
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
I'm getting this same issue for Android...
same issue. react-native-reanimated@2.14.1
I am facing same issue on iOS
Check with reanimated 2.2.4, it's working now.
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.
any solution? im facing this problem too :(
@hieuplasma show your Podfile pls!
@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!
Try to add
if pod.name.eql?('vision-camera-code-scanner') || pod.name.eql?('VisionCamera') || pod.name.eql?('RNReanimated')
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?
@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
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!
This should be fixed with the Frame Processors rewrite in V3! 🥳
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 (
); };
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
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 !
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
What happened instead?
Relevant log output
Device
iPhone 12 Pro Max
VisionCamera Version
2.12.1
Additional information