ReferenceError: Can't find variable: __scanCodes

FluffyDiscord commented 2 years ago

No matter what I do I end up with this error and I am desperate.

Things I tried from other github issues

remove/reinstall node_modules
run react-native start --reset-cache
run gradlew clean
use different node versions (16.9.0, 14.20.0)
use different react-native-reanimated versions (2.4.1, 2.7.0, 2.8.0, 2.9.1)
use different plugin versions (0.1.6, 0.2.0)
restart IDE/android studio/PC
run CLI as admin

package.json

{
  "name": "dasda",
  "version": "1.0.0",
  "description": "dadada",
  "dependencies": {
    "@freakycoder/react-native-bounceable": "^0.2.5",
    "@freakycoder/react-native-custom-text": "0.1.2",
    "@freakycoder/react-native-helpers": "^1.0.2",
    "@react-native-community/masked-view": "^0.1.11",
    "@react-navigation/bottom-tabs": "^6.3.1",
    "@react-navigation/native": "^6.0.10",
    "@react-navigation/stack": "^6.2.1",
    "@reduxjs/toolkit": "^1.8.2",
    "axios": "^0.27.2",
    "axios-hooks": "^3.0.3",
    "events": "^3.3.0",
    "lodash-es": "^4.17.21",
    "lottie-ios": "3.2.3",
    "lottie-react-native": "^5.1.3",
    "luxon": "^2.4.0",
    "metro-config": "^0.71.0",
    "moti": "^0.18.0",
    "react": "17.0.2",
    "react-native": "0.68.2",
    "react-native-dynamic-vector-icons": "^1.1.6",
    "react-native-elevation": "^1.0.0",
    "react-native-file-access": "^2.4.3",
    "react-native-gesture-handler": "^2.5.0",
    "react-native-linear-gradient": "^2.5.6",
    "react-native-mmkv-storage": "^0.7.6",
    "react-native-reanimated": "2.9.1",
    "react-native-safe-area-context": "^4.3.1",
    "react-native-screens": "^3.13.1",
    "react-native-shadow-2": "^6.0.5",
    "react-native-svg": "^12.3.0",
    "react-native-svg-transformer": "^1.0.0",
    "react-native-toast-message": "^2.1.5",
    "react-native-transparent-status-and-navigation-bar": "^1.0.3",
    "react-native-use-input-scroll-handler": "^0.1.1",
    "react-native-vector-icons": "^9.2.0",
    "react-native-vision-camera": "^2.13.5",
    "react-navigation-helpers": "^2.1.0",
    "react-redux": "^8.0.2",
    "redux": "^4.2.0",
    "vision-camera-code-scanner": "^0.2.0",
    "watchman": "^1.0.0"
  },
  "devDependencies": {
    "@babel/core": "^7.17.10",
    "@babel/runtime": "^7.17.9",
    "@commitlint/cli": "^16.2.4",
    "@commitlint/config-conventional": "^16.2.4",
    "@react-native-community/eslint-config": "^3.0.2",
    "@types/lodash-es": "^4.17.6",
    "@types/luxon": "^2.3.2",
    "@types/react-native": "^0.67.7",
    "@typescript-eslint/eslint-plugin": "^5.23.0",
    "@typescript-eslint/parser": "^5.23.0",
    "babel-plugin-module-resolver": "^4.1.0",
    "eslint": "^8.15.0",
    "eslint-config-prettier": "8.5.0",
    "eslint-config-standard-react-native": "1.0.0",
    "eslint-plugin-flowtype": "^8.0.3",
    "eslint-plugin-import": "2.26.0",
    "eslint-plugin-jest": "26.1.5",
    "eslint-plugin-jsx-a11y": "6.5.1",
    "eslint-plugin-prettier": "4.0.0",
    "eslint-plugin-promise": "6.0.0",
    "eslint-plugin-react": "7.29.4",
    "eslint-plugin-react-hooks": "4.5.0",
    "eslint-plugin-react-native": "4.0.0",
    "eslint-plugin-unused-imports": "^2.0.0",
    "husky": "^8.0.1",
    "metro-react-native-babel-preset": "^0.70.3",
    "prettier": "^2.6.2",
    "typescript": "^4.6.4"
  },
  "scripts": {
    "android": "npx react-native run-android",
    "ios": "npx react-native run-ios",
    "start": "react-native start --reset-cache",
    "husky:setup": "npx husky-init && npm run husky:commitlint && npm run husky:prettier && npm run husky:lint",
    "husky:commitlint": "npx husky add .husky/commit-msg 'npx --no-install commitlint --edit'",
    "husky:prettier": "npx husky set .husky/pre-commit 'npm run prettier'",
    "husky:lint": "npx husky add .husky/pre-commit 'npm run lint'",
    "clean-up": "rm -rf .git && rm -rf ./assets && git init && npm run husky:setup",
    "clean:android": "cd android && ./gradlew clean",
    "debug:android": "cd android && ./gradlew assembleDebug",
    "release:android": "cd android && ./gradlew assembleRelease",
    "release:play": "cd android && ./gradlew bundleRelease",
    "test:apk": "react-native run-android --variant=release",
    "prettier": "cd src && npx prettier --write . && git add .",
    "prepare": "husky install",
    "test": "jest",
    "lint": "eslint . --ext .js,.jsx,.ts,.tsx"
  },
  "resolutions": {
    "@types/react": "^17"
  },
  "jest": {
    "preset": "react-native",
    "moduleFileExtensions": [
      "ts",
      "tsx",
      "js",
      "jsx",
      "json",
      "node"
    ]
  }
}

babel.config.js

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

entrypoint index.js

import 'react-native-reanimated'
import {AppRegistry} from 'react-native'
import App from './App'
import {name as appName} from './app.json'
import {Settings} from "luxon"

Settings.defaultLocale = 'cs'

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

namti commented 1 year ago

Downgrading Xcode from 14.0 to 13.4.1 fixed this. Android doesn't have this issue.

david-bitaryio commented 1 year ago

It seems downgrading XCode to 13.4.1 does build the app and the app works in iOS15.6. However, the app installed on iOS 16 will report the same issue.

I am using Apple M1 and below is my package

package	version
react-native	0.68.3
react-native-reanimated	2.10.0
react-native-vision-camera	2.14.1
vision-camera-code-scanner	0.2.0

fukemy commented 1 year ago

I ended up to remove this lib and write my own native module to open qrcode scanner and return params to my app when close screen I dont belive the lib that have the same problem in multi topic but can not solved this

Simoon-F commented 1 year ago

same.

marcos0x commented 1 year ago

@fukemy @Simoon-F can you share me your code?

namti commented 1 year ago

It seems downgrading XCode to 13.4.1 does build the app and the app works in iOS15.6. However, the app installed on iOS 16 will report the same issue.

I am using Apple M1 and below is my package

package version react-native 0.68.3 react-native-reanimated 2.10.0 react-native-vision-camera 2.14.1 vision-camera-code-scanner 0.2.0

You mean debugging on iOS 16? My project runs on iPhone 8 Plus (16.0) with no problem by far. I have react-native 0.68.3 installed.

I kept Xcode 14 and put 13.4.1 version in another place. Then changed to Xcode command line tools 13.4.1

sudo xcode-select -s /Applications/Xcode-3.14.1.app

You will see two versions in Preferences -> Locations.

calderaro commented 1 year ago

It seems that the problem is xcode 14. Has anyone found a solution?

ifeliperz commented 1 year ago

i have the same problem, i'm using xcode 14 and RN 0.69.3

Simoon-F commented 1 year ago

@fukemy @Simoon-F can you share me your code?

My problem is solved, it's the wrong format, I'm ashamed.

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

YraZinchenko commented 1 year ago

I had such a problem when upgrading to xcode version 14, all the solutions that I tried do not help, the library is installed correctly and the babel config is configured correctly, it looks like the problem appeared just after upgrading to xcode version 14 and consists in the fact that there are no global variables function scanСodes, it looks like the configuration for the global variables in xcode could change, but I don’t know where to see it, I also tried to use another library that uses global variables and there is the same error for the function that is used in the babel config. This is what I came to in my search, but I may be wrong because there is no exact understanding of how it all works, how to fix it without downgrading the xcode version is unclear. And the most interesting thing is where you can see the body of the scanСodes function, if you could see it, then we could copy it and use it locally, but I did not succeed in the search function body, can't figure out where it is located

Volampus commented 1 year ago

I am also experiencing this issue on xcode 14 and react-native 0.66.3

cccolo commented 1 year ago

anyone knows another lib to read qr code?

cemocanon commented 1 year ago

I downgraded xCode version from 14.0 to 13.4.1 and it worked for me.

"react": "18.1.0", "react-native": "0.70.1",

DevelopCarlosWM commented 1 year ago

Have the same issue with iOS 16 and Xcode 14.0.1

Can't downgrade to Xcode 13 due it don't support iOS 16

namti commented 1 year ago

Check out my solution here https://github.com/rodgomesc/vision-camera-code-scanner/issues/79#issuecomment-1251528808

If Xcode 13 prompts unsupported iOS version, run the project in Xcode 14 first, then run the project in Xcode 13. This should work. Our app has been released and running with no problem.

DevelopCarlosWM commented 1 year ago

How you do that?

I already selected Xcode 13 and build but the problem persists

namti commented 1 year ago

Just as I described. The idea is to deceive Xcode 13.

Open 14 run on your iPhone, ignore the "Can't find variable: __scanCodes" error, quit 14. Open your project in 13, select your iPhone, run. Next time if 13 prompts unsupported iOS version, do these steps again.

I'm using command line tools 14, try 13 if it has build error.

stanrud commented 1 year ago

Hey there, I had the same problem and it took me a while to figure out what was wrong with it.

Below you can find a patch for react-native-vision-camera package which should solve the issue:

diff --git a/node_modules/react-native-vision-camera/ios/Frame Processor/FrameProcessorPlugin.h b/node_modules/react-native-vision-camera/ios/Frame Processor/FrameProcessorPlugin.h
index a2ccdcb..7c9690e 100644
--- a/node_modules/react-native-vision-camera/ios/Frame Processor/FrameProcessorPlugin.h    
+++ b/node_modules/react-native-vision-camera/ios/Frame Processor/FrameProcessorPlugin.h    
@@ -53,7 +53,7 @@ objc_name : NSObject<FrameProcessorPluginBase>
 @end                                                                                \
 @implementation objc_name (FrameProcessorPlugin)                                    \
                                                                                     \
-__attribute__((constructor)) static void VISION_CONCAT(initialize_, objc_name)()    \
++(void)load                                                                         \
 {                                                                                   \
   [FrameProcessorPluginRegistry addFrameProcessorPlugin:@"__" @ #name callback:^id(Frame* frame, NSArray<id>* args) {    \
     return [objc_name callback:frame withArgs:args];                               \

If you don't know how to do patching, check this package patch-package

LeonardAlimadhi1 commented 1 year ago

Hey there, I had the same problem and took some time to figure out what was wrong with it.

Below you can find a patch for react-native-vision-camera package which should solve the issue:

diff --git a/node_modules/react-native-vision-camera/ios/Frame Processor/FrameProcessorPlugin.h b/node_modules/react-native-vision-camera/ios/Frame Processor/FrameProcessorPlugin.h
index a2ccdcb..7c9690e 100644
--- a/node_modules/react-native-vision-camera/ios/Frame Processor/FrameProcessorPlugin.h  
+++ b/node_modules/react-native-vision-camera/ios/Frame Processor/FrameProcessorPlugin.h  
@@ -53,7 +53,7 @@ objc_name : NSObject<FrameProcessorPluginBase>
 @end                                                                                \
 @implementation objc_name (FrameProcessorPlugin)                                    \
                                                                                     \
-__attribute__((constructor)) static void VISION_CONCAT(initialize_, objc_name)()    \
++(void)load                                                                         \
 {                                                                                   \
   [FrameProcessorPluginRegistry addFrameProcessorPlugin:@"__" @ #name callback:^id(Frame* frame, NSArray<id>* args) {    \
     return [objc_name callback:frame withArgs:args];                               \

If you don't know how to do patching, check this package patch-package

This did work for me, great job! Thanks!

qtipee commented 1 year ago

Hey there, I had the same problem and it took me a while to figure out what was wrong with it.

Below you can find a patch for react-native-vision-camera package which should solve the issue:

diff --git a/node_modules/react-native-vision-camera/ios/Frame Processor/FrameProcessorPlugin.h b/node_modules/react-native-vision-camera/ios/Frame Processor/FrameProcessorPlugin.h
index a2ccdcb..7c9690e 100644
--- a/node_modules/react-native-vision-camera/ios/Frame Processor/FrameProcessorPlugin.h  
+++ b/node_modules/react-native-vision-camera/ios/Frame Processor/FrameProcessorPlugin.h  
@@ -53,7 +53,7 @@ objc_name : NSObject<FrameProcessorPluginBase>
 @end                                                                                \
 @implementation objc_name (FrameProcessorPlugin)                                    \
                                                                                     \
-__attribute__((constructor)) static void VISION_CONCAT(initialize_, objc_name)()    \
++(void)load                                                                         \
 {                                                                                   \
   [FrameProcessorPluginRegistry addFrameProcessorPlugin:@"__" @ #name callback:^id(Frame* frame, NSArray<id>* args) {    \
     return [objc_name callback:frame withArgs:args];                               \

If you don't know how to do patching, check this package patch-package

So you just have to change __attribute__((constructor)) static void VISION_CONCAT(initialize_, objc_name)() by +(void)load? And then do you pod install?

wogno commented 1 year ago

I resolved this problem, but just add [] before reanimed in plugin as this one

plugins: [ [ 'react-native-reanimated/plugin', { globals: ['__scanCodes',], }, ], ]

stanrud commented 1 year ago

Hey there, I had the same problem and it took me a while to figure out what was wrong with it. Below you can find a patch for react-native-vision-camera package which should solve the issue:

diff --git a/node_modules/react-native-vision-camera/ios/Frame Processor/FrameProcessorPlugin.h b/node_modules/react-native-vision-camera/ios/Frame Processor/FrameProcessorPlugin.h
index a2ccdcb..7c9690e 100644
--- a/node_modules/react-native-vision-camera/ios/Frame Processor/FrameProcessorPlugin.h    
+++ b/node_modules/react-native-vision-camera/ios/Frame Processor/FrameProcessorPlugin.h    
@@ -53,7 +53,7 @@ objc_name : NSObject<FrameProcessorPluginBase>
 @end                                                                                \
 @implementation objc_name (FrameProcessorPlugin)                                    \
                                                                                     \
-__attribute__((constructor)) static void VISION_CONCAT(initialize_, objc_name)()    \
++(void)load                                                                         \
 {                                                                                   \
   [FrameProcessorPluginRegistry addFrameProcessorPlugin:@"__" @ #name callback:^id(Frame* frame, NSArray<id>* args) {    \
     return [objc_name callback:frame withArgs:args];                               \

If you don't know how to do patching, check this package patch-package

So you just have to change __attribute__((constructor)) static void VISION_CONCAT(initialize_, objc_name)() by +(void)load? And then do you pod install?

Yes, that's exactly what the patch does!

SmartArray commented 1 year ago

Hey there, I had the same problem and it took me a while to figure out what was wrong with it.

Below you can find a patch for react-native-vision-camera package which should solve the issue:

diff --git a/node_modules/react-native-vision-camera/ios/Frame Processor/FrameProcessorPlugin.h b/node_modules/react-native-vision-camera/ios/Frame Processor/FrameProcessorPlugin.h
index a2ccdcb..7c9690e 100644
--- a/node_modules/react-native-vision-camera/ios/Frame Processor/FrameProcessorPlugin.h  
+++ b/node_modules/react-native-vision-camera/ios/Frame Processor/FrameProcessorPlugin.h  
@@ -53,7 +53,7 @@ objc_name : NSObject<FrameProcessorPluginBase>
 @end                                                                                \
 @implementation objc_name (FrameProcessorPlugin)                                    \
                                                                                     \
-__attribute__((constructor)) static void VISION_CONCAT(initialize_, objc_name)()    \
++(void)load                                                                         \
 {                                                                                   \
   [FrameProcessorPluginRegistry addFrameProcessorPlugin:@"__" @ #name callback:^id(Frame* frame, NSArray<id>* args) {    \
     return [objc_name callback:frame withArgs:args];                               \

If you don't know how to do patching, check this package patch-package

Hey, can you elaborate on the issue why XCode14 is causing this issue? Have you opened a PR or issue in the repo of react-native-vision-camera? Thanks in advance!

qtipee commented 1 year ago

I can confirm I made my custom frame processor work with the patch above :)

My environment:

MacBook M1
XCode 14.0.1
React Native 0.68.3
react-native-vision-camera 2.14.1

From what I understood, the problem comes from using Swift for the iOS native module with Xcode 14.

fondue-tech commented 1 year ago

I will wait for official fix.

brunodeilhot commented 1 year ago

Hey there, I had the same problem and it took me a while to figure out what was wrong with it.

Below you can find a patch for react-native-vision-camera package which should solve the issue:

diff --git a/node_modules/react-native-vision-camera/ios/Frame Processor/FrameProcessorPlugin.h b/node_modules/react-native-vision-camera/ios/Frame Processor/FrameProcessorPlugin.h
index a2ccdcb..7c9690e 100644
--- a/node_modules/react-native-vision-camera/ios/Frame Processor/FrameProcessorPlugin.h  
+++ b/node_modules/react-native-vision-camera/ios/Frame Processor/FrameProcessorPlugin.h  
@@ -53,7 +53,7 @@ objc_name : NSObject<FrameProcessorPluginBase>
 @end                                                                                \
 @implementation objc_name (FrameProcessorPlugin)                                    \
                                                                                     \
-__attribute__((constructor)) static void VISION_CONCAT(initialize_, objc_name)()    \
++(void)load                                                                         \
 {                                                                                   \
   [FrameProcessorPluginRegistry addFrameProcessorPlugin:@"__" @ #name callback:^id(Frame* frame, NSArray<id>* args) {    \
     return [objc_name callback:frame withArgs:args];                               \

If you don't know how to do patching, check this package patch-package

For anyone still having build issues after applying the patch on mac M1, running "arch -x86_64 pod install" worked for me.

comertcimen commented 1 year ago

I will wait for official fix.

A fix has been committed to the repo, but npm and yarn packages has not been updated yet. Fix

You can install directly from the github repo or wait for the update.

frankbolviken commented 1 year ago

How far off from providing a official fix for this?

stanrud commented 1 year ago

How far off from providing a official fix for this?

It's already released a few days ago ;) https://github.com/mrousavy/react-native-vision-camera/releases/tag/v2.15.2

bazter commented 1 year ago

Was the patch supposed to fix the ios build using xcode 14 on M1 devices? I still can't get it to work, android build is fine but the ios build fails with the message

Failed to build iOS project. We ran "xcodebuild" command but it exited with error code 65.

followed by huge log full of these messages

... building for iOS Simulator-x86_64 but attempting to link with file built for iOS Simulator-arm64

I'm sorry if it's not related to this issue, I'm kinda new to RN development and I suddenly ran into this error after I added this lib. When I remove this lib, the build works again.

SmartArray commented 1 year ago

It's related to the fact that Google MLKit Team does not ship ARM simulator binaries and we can't compile ourselves because the source code is not public

bazter commented 1 year ago

Was the patch supposed to fix the ios build using xcode 14 on M1 devices? I still can't get it to work, android build is fine but the ios build fails with the message

Failed to build iOS project. We ran "xcodebuild" command but it exited with error code 65.

followed by huge log full of these messages

... building for iOS Simulator-x86_64 but attempting to link with file built for iOS Simulator-arm64

I'm sorry if it's not related to this issue, I'm kinda new to RN development and I suddenly ran into this error after I added this lib. When I remove this lib, the build works again.

I managed to resolve this and finally made my project build for Android emulator and iOS (both device and simulator) on M1 machine using xcode 14.

I'm currently successfully building for :

Pixel 5 with Android 12 (emulator)
iPhone 14 with iOS 16 (simulator)
iPhone 13 Pro with iOS 16 (device)

Issues I faced:

Android: With latest versions of all the packages I was able to build for android, but the app crashed immediately after opening the camera. Apparently the frame processor was the issue.

iOS: I was able to "pod install" but the ios build for simulator failed thx to xcode 14 I was using. For device build, the app crashed after opening the camera.

Solution:

I downgraded some of the packages and applied 3 patches to narrow them.

My currently working versions:

    "react": "18.1.0",
    "react-native": "0.70.4",
    "react-native-reanimated": "2.10.0",
    "react-native-vision-camera": "2.15.0",
    "vision-camera-code-scanner": "^0.2.0"

The patches:

I had to update CLANG_CXX_LANGUAGE_STANDARD for both react-native-reanimated and react-native-vision-camera to align them with hermes since I kept latest react-native. Without this patch, "pod install" wasn't possible.
The last patch is the one from above, fixing the reanimated package.

// react-native-reanimated+2.10.0.patch

diff --git a/node_modules/react-native-reanimated/RNReanimated.podspec b/node_modules/react-native-reanimated/RNReanimated.podspec
index d53cb12..719f813 100644
--- a/node_modules/react-native-reanimated/RNReanimated.podspec
+++ b/node_modules/react-native-reanimated/RNReanimated.podspec
@@ -94,7 +94,7 @@ Pod::Spec.new do |s|
   }
   s.compiler_flags = folly_compiler_flags + ' ' + boost_compiler_flags
   s.xcconfig               = {
-    "CLANG_CXX_LANGUAGE_STANDARD" => "c++14",
+    "CLANG_CXX_LANGUAGE_STANDARD" => "c++17",
     "HEADER_SEARCH_PATHS" => "\"$(PODS_ROOT)/boost\" \"$(PODS_ROOT)/boost-for-react-native\" \"$(PODS_ROOT)/glog\" \"$(PODS_ROOT)/#{folly_prefix}Folly\" \"${PODS_ROOT}/Headers/Public/React-hermes\" \"${PODS_ROOT}/Headers/Public/hermes-engine\"",
                                "OTHER_CFLAGS" => "$(inherited)" + " " + folly_flags  }

// react-native-vision-camera+2.15.0.patch

diff --git a/node_modules/react-native-vision-camera/VisionCamera.podspec b/node_modules/react-native-vision-camera/VisionCamera.podspec
index 3f588c3..cbdf58e 100644
--- a/node_modules/react-native-vision-camera/VisionCamera.podspec
+++ b/node_modules/react-native-vision-camera/VisionCamera.podspec
@@ -32,7 +32,7 @@ Pod::Spec.new do |s|
   }
   s.compiler_flags = folly_compiler_flags + ' ' + boost_compiler_flags
   s.xcconfig = {
-    "CLANG_CXX_LANGUAGE_STANDARD" => "c++14",
+    "CLANG_CXX_LANGUAGE_STANDARD" => "c++17",
     "HEADER_SEARCH_PATHS" => "\"$(PODS_ROOT)/boost\" \"$(PODS_ROOT)/boost-for-react-native\" \"$(PODS_ROOT)/glog\" \"$(PODS_ROOT)/RCT-Folly\" \"${PODS_ROOT}/Headers/Public/React-hermes\" \"${PODS_ROOT}/Headers/Public/hermes-engine\"",
     "OTHER_CFLAGS" => "$(inherited)" + " " + folly_flags
   }
diff --git a/node_modules/react-native-vision-camera/ios/Frame Processor/FrameProcessorPlugin.h b/node_modules/react-native-vision-camera/ios/Frame Processor/FrameProcessorPlugin.h
index a2ccdcb4..7c9690e0 100644
--- a/node_modules/react-native-vision-camera/ios/Frame Processor/FrameProcessorPlugin.h
+++ b/node_modules/react-native-vision-camera/ios/Frame Processor/FrameProcessorPlugin.h
@@ -53,7 +53,7 @@ objc_name : NSObject<FrameProcessorPluginBase>
 @end                                                                                \
 @implementation objc_name (FrameProcessorPlugin)                                    \
                                                                                     \
-__attribute__((constructor)) static void VISION_CONCAT(initialize_, objc_name)()    \
++(void)load                                                                         \
 {                                                                                   \
   [FrameProcessorPluginRegistry addFrameProcessorPlugin:@"__" @ #name callback:^id(Frame* frame, NSArray<id>* args) {    \
     return [objc_name callback:frame withArgs:args];                               \

Hope this helps anyone, have a nice day!

Moatezz commented 1 year ago

How far off from providing a official fix for this?

It's already released a few days ago ;) https://github.com/mrousavy/react-native-vision-camera/releases/tag/v2.15.2

still the same problem with android

Moatezz commented 1 year ago

While we wait for a fix, vision-camera-dynamsoft-barcode-reader worked right out of the box with RN 0.69.4 and R 18.0.0

It crashes on RN 0.70

valery-lavrik commented 1 year ago

same problem.

heydavee commented 1 year ago

Same problem on android. Don't understand why changing stuff in ios folders would help with this. Losing half a day of work because of this bug. Annoying.

jo-dadic commented 1 year ago

Was the patch supposed to fix the ios build using xcode 14 on M1 devices? I still can't get it to work, android build is fine but the ios build fails with the message Failed to build iOS project. We ran "xcodebuild" command but it exited with error code 65. followed by huge log full of these messages ... building for iOS Simulator-x86_64 but attempting to link with file built for iOS Simulator-arm64 I'm sorry if it's not related to this issue, I'm kinda new to RN development and I suddenly ran into this error after I added this lib. When I remove this lib, the build works again.

I managed to resolve this and finally made my project build for Android emulator and iOS (both device and simulator) on M1 machine using xcode 14.

I'm currently successfully building for :

Pixel 5 with Android 12 (emulator)

iPhone 14 with iOS 16 (simulator)

iPhone 13 Pro with iOS 16 (device)

Issues I faced:

Android: With latest versions of all the packages I was able to build for android, but the app crashed immediately after opening the camera. Apparently the frame processor was the issue.

iOS: I was able to "pod install" but the ios build for simulator failed thx to xcode 14 I was using. For device build, the app crashed after opening the camera.

Solution:

I downgraded some of the packages and applied 3 patches to narrow them.

My currently working versions:
    "react": "18.1.0",
    "react-native": "0.70.4",
    "react-native-reanimated": "2.10.0",
    "react-native-vision-camera": "2.15.0",
    "vision-camera-code-scanner": "^0.2.0"
The patches:

I had to update CLANG_CXX_LANGUAGE_STANDARD for both react-native-reanimated and react-native-vision-camera to align them with hermes since I kept latest react-native. Without this patch, "pod install" wasn't possible.

The last patch is the one from above, fixing the reanimated package.
// react-native-reanimated+2.10.0.patch

diff --git a/node_modules/react-native-reanimated/RNReanimated.podspec b/node_modules/react-native-reanimated/RNReanimated.podspec
index d53cb12..719f813 100644
--- a/node_modules/react-native-reanimated/RNReanimated.podspec
+++ b/node_modules/react-native-reanimated/RNReanimated.podspec
@@ -94,7 +94,7 @@ Pod::Spec.new do |s|
   }
   s.compiler_flags = folly_compiler_flags + ' ' + boost_compiler_flags
   s.xcconfig               = {
-    "CLANG_CXX_LANGUAGE_STANDARD" => "c++14",
+    "CLANG_CXX_LANGUAGE_STANDARD" => "c++17",
     "HEADER_SEARCH_PATHS" => "\"$(PODS_ROOT)/boost\" \"$(PODS_ROOT)/boost-for-react-native\" \"$(PODS_ROOT)/glog\" \"$(PODS_ROOT)/#{folly_prefix}Folly\" \"${PODS_ROOT}/Headers/Public/React-hermes\" \"${PODS_ROOT}/Headers/Public/hermes-engine\"",
                                "OTHER_CFLAGS" => "$(inherited)" + " " + folly_flags  }
// react-native-vision-camera+2.15.0.patch

diff --git a/node_modules/react-native-vision-camera/VisionCamera.podspec b/node_modules/react-native-vision-camera/VisionCamera.podspec
index 3f588c3..cbdf58e 100644
--- a/node_modules/react-native-vision-camera/VisionCamera.podspec
+++ b/node_modules/react-native-vision-camera/VisionCamera.podspec
@@ -32,7 +32,7 @@ Pod::Spec.new do |s|
   }
   s.compiler_flags = folly_compiler_flags + ' ' + boost_compiler_flags
   s.xcconfig = {
-    "CLANG_CXX_LANGUAGE_STANDARD" => "c++14",
+    "CLANG_CXX_LANGUAGE_STANDARD" => "c++17",
     "HEADER_SEARCH_PATHS" => "\"$(PODS_ROOT)/boost\" \"$(PODS_ROOT)/boost-for-react-native\" \"$(PODS_ROOT)/glog\" \"$(PODS_ROOT)/RCT-Folly\" \"${PODS_ROOT}/Headers/Public/React-hermes\" \"${PODS_ROOT}/Headers/Public/hermes-engine\"",
     "OTHER_CFLAGS" => "$(inherited)" + " " + folly_flags
   }
diff --git a/node_modules/react-native-vision-camera/ios/Frame Processor/FrameProcessorPlugin.h b/node_modules/react-native-vision-camera/ios/Frame Processor/FrameProcessorPlugin.h
index a2ccdcb4..7c9690e0 100644
--- a/node_modules/react-native-vision-camera/ios/Frame Processor/FrameProcessorPlugin.h
+++ b/node_modules/react-native-vision-camera/ios/Frame Processor/FrameProcessorPlugin.h
@@ -53,7 +53,7 @@ objc_name : NSObject<FrameProcessorPluginBase>
 @end                                                                                \
 @implementation objc_name (FrameProcessorPlugin)                                    \
                                                                                     \
-__attribute__((constructor)) static void VISION_CONCAT(initialize_, objc_name)()    \
++(void)load                                                                         \
 {                                                                                   \
   [FrameProcessorPluginRegistry addFrameProcessorPlugin:@"__" @ #name callback:^id(Frame* frame, NSArray<id>* args) {    \
     return [objc_name callback:frame withArgs:args];                               \
Hope this helps anyone, have a nice day!

My RNReanimated.podspec doesn't even have "CLANG_CXX_LANGUAGE_STANDARD" => "c++14" line...

talesborn commented 1 year ago

Same problem!

I'm trying to solve this bug for 2 days, but my bug is on Android

valery-lavrik commented 1 year ago

Clearing the cache helped me npm start -- --reset-cache

talesborn commented 1 year ago

Clearing the cache helped me npm start -- --reset-cache

this workn't for me, i'm trying update plugins versions, but it does not work

valery-lavrik commented 1 year ago

try to update all your packages

talesborn commented 1 year ago

This is my package.json

{
  "name": "IXCAuthy",
  "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 ."
  },
  "dependencies": {
    "@notifee/react-native": "^5.6.0",
    "@react-native-community/masked-view": "0.1.11",
    "@react-native-firebase/app": "^15.3.0",
    "@react-native-firebase/messaging": "^15.3.0",
    "@react-navigation/native": "^6.0.13",
    "@react-navigation/stack": "^6.3.2",
    "react": "18.1.0",
    "react-native": "0.70.5",
    "react-native-device-info": "8.4.1",
    "react-native-geolocation-service": "5.3.0-beta.3",
    "react-native-gesture-handler": "^2.7.1",
    "react-native-permissions": "^3.6.1",
    "react-native-reanimated": "^2.12.0",
    "react-native-safe-area-context": "^4.4.1",
    "react-native-screens": "^3.18.2",
    "react-native-simple-toast": "^1.1.4",
    "react-native-splash-screen": "^3.3.0",
    "react-native-status-bar-height": "2.6.0",
    "react-native-vector-icons": "^9.2.0",
    "react-native-vision-camera": "^2.15.2",
    "react-native-webview": "^11.23.1",
    "vision-camera-code-scanner": "^0.2.0"
  },
  "devDependencies": {
    "@babel/core": "^7.12.9",
    "@babel/runtime": "^7.12.5",
    "@react-native-community/eslint-config": "^2.0.0",
    "babel-jest": "^26.6.3",
    "eslint": "^7.32.0",
    "jest": "^26.6.3",
    "metro-react-native-babel-preset": "^0.72.3",
    "react-native-codegen": "^0.0.7",
    "react-test-renderer": "^18.1.0",
    "webpack-cli": "^4.9.1"
  },
  "jest": {
    "preset": "react-native"
  }
}

And, this is my JS file

import React  from "react";
import {
    View,
    StatusBar,
    ActivityIndicator,
    Text
} from "react-native";
import SimpleToast from 'react-native-simple-toast';
import {useCameraDevices, Camera} from 'react-native-vision-camera';
import {useScanBarcodes, BarcodeFormat} from 'vision-camera-code-scanner';
import STYLES from "./Style/Style";

function Scanner() {
    const camera = useCameraDevices();
    const [frameProcessor, barcodes] = useScanBarcodes([BarcodeFormat.QR_CODE], {
        checkInverted: true,
    });
    // console.log(frameProcessor());

    const onSuccess = (qrcode) => {
        const storage = new StorageHelper();
        let url = JSON.parse(qrcode).urlSistema;
        registerServer(url).then(async _=>{
            await storage.setItem('webviewUrl', url)
            global.navigation.replace('Webview')
        }).catch(e => {
            SimpleToast.show('QRCode inválido' , 500)
        })
    };
    React.useEffect(() => {
        if (barcodes.length) {
            let results = []
            barcodes.forEach(code => {
                if (!results.includes(code.displayValue)) {
                    results.push(code.displayValue)
                }
            })
            if (results.length === 1) {
                onSuccess(results[0]);
            } else {
                SimpleToast.show('múltiplos QRCodes', 500)
            }
        }
    }, [barcodes])

    return (
        <View style={STYLES.container}>
            <StatusBar barStyle="light-content" backgroundColor="#202130"/>
            {camera.back ?
                <Camera
                    device={camera.back}
                    isActive={true}
                    audio={false}
                    frameProcessor={frameProcessor}
                    frameProcessorFps={1}
                    style={STYLES.container}/>
                :
                <View style={STYLES.centerView}>
                    <ActivityIndicator size={50} color={'#ef7d00'}/>
                </View>
            }
            <View style={STYLES.floatingContainer}>
                <View style={STYLES.header}>
                    <Text style={STYLES.textStyle}>
                        No Opa! Suite web, clique no icone "<Text
                        style={STYLES.bold}>QRCode</Text>".
                        Em seguida, encaixe o<Text style={STYLES.bold}> QRCode </Text>dentro do
                        quadrado desenhado abaixo
                    </Text>
                </View>
                {camera.back &&
                    <>
                        <View style={STYLES.filler}/>
                        <View style={STYLES.square}>
                            <View style={STYLES.outline}/>
                        </View>
                        <View style={STYLES.filler}/>
                    </>
                }
            </View>
        </View>
    );

}

export default Scanner

When I comment out the line frameProcessor={frameProcessor} I get no error but when I add this line I get the error below

When i remove the frameProcessor line, and add a console.log to get what is returning in frameProcessor function, i receive this error message:

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

mensagem de erro da linha de comando acima:

 ERROR  ReferenceError: Can't find variable: __scanCodes

This error is located at:
    in Scanner (created by SceneView)
    in StaticContainer
    in EnsureSingleNavigator (created by SceneView)
    in SceneView (created by CardContainer)
    in RCTView (created by View)
    in View (created by CardContainer)
    in RCTView (created by View)
    in View (created by CardContainer)
    in RCTView (created by View)
    in View
    in CardSheet (created by Card)
    in RCTView (created by View)
    in View (created by AnimatedComponent)
    in AnimatedComponent
    in AnimatedComponentWrapper (created by PanGestureHandler)
    in PanGestureHandler (created by PanGestureHandler)
    in PanGestureHandler (created by Card)
    in RCTView (created by View)
    in View (created by AnimatedComponent)
    in AnimatedComponent
    in AnimatedComponentWrapper (created by Card)
    in RCTView (created by View)
    in View (created by Card)
    in Card (created by CardContainer)
    in CardContainer (created by CardStack)
    in RNSScreen (created by AnimatedComponent)
    in AnimatedComponent
    in AnimatedComponentWrapper (created by InnerScreen)
    in Suspender (created by Freeze)
    in Suspense (created by Freeze)
    in Freeze (created by DelayedFreeze)
    in DelayedFreeze (created by InnerScreen)
    in InnerScreen (created by Screen)
    in Screen (created by MaybeScreen)
    in MaybeScreen (created by CardStack)
    in RNSScreenContainer (created by ScreenContainer)
    in ScreenContainer (created by MaybeScreenContainer)
    in MaybeScreenContainer (created by CardStack)
    in RCTView (created by View)
    in View (created by Background)
    in Background (created by CardStack)
    in CardStack (created by HeaderShownContext)
    in RNCSafeAreaProvider (created by SafeAreaProvider)
    in SafeAreaProvider (created by SafeAreaInsetsContext)
    in SafeAreaProviderCompat (created by StackView)
    in RNGestureHandlerRootView (created by GestureHandlerRootView)
    in GestureHandlerRootView (created by StackView)
    in StackView (created by StackNavigator)
    in PreventRemoveProvider (created by NavigationContent)
    in NavigationContent
    in Unknown (created by StackNavigator)
    in StackNavigator (created by Navigator)
    in EnsureSingleNavigator
    in BaseNavigationContainer
    in ThemeProvider
    in NavigationContainerInner (created by Navigator)
    in Navigator (created by Index)
    in RCTView (created by View)
    in View (created by Index)
    in Index
    in RCTView (created by View)
    in View (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer
    in IXCAuthy(RootComponent)
 WARN  Possible Unhandled Promise Rejection (id: 0):
ReferenceError: Can't find variable: __scanCodes
_f@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=br.com.ixcsoft.ixcauthy&modulesOnly=false&runModule=true:125304:25
_f@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=br.com.ixcsoft.ixcauthy&modulesOnly=false&runModule=true:125328:85
_f@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=br.com.ixcsoft.ixcauthy&modulesOnly=false&runModule=true:125192:23
Scanner@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=br.com.ixcsoft.ixcauthy&modulesOnly=false&runModule=true:124174:31
renderWithHooks@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=br.com.ixcsoft.ixcauthy&modulesOnly=false&runModule=true:10686:33
mountIndeterminateComponent@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=br.com.ixcsoft.ixcauthy&modulesOnly=false&runModule=true:13326:34
beginWork$1@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=br.com.ixcsoft.ixcauthy&modulesOnly=false&runModule=true:17870:29
performUnitOfWork@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=br.com.ixcsoft.ixcauthy&modulesOnly=false&runModule=true:17350:29
workLoopSync@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=br.com.ixcsoft.ixcauthy&modulesOnly=false&runModule=true:17294:28
renderRootSync@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=br.com.ixcsoft.ixcauthy&modulesOnly=false&runModule=true:17275:25
performSyncWorkOnRoot@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=br.com.ixcsoft.ixcauthy&modulesOnly=false&runModule=true:17051:40
performSyncWorkOnRoot@[native code]
flushSyncCallbacks@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=br.com.ixcsoft.ixcauthy&modulesOnly=false&runModule=true:8027:36
flushSyncCallbacksOnlyInLegacyMode@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=br.com.ixcsoft.ixcauthy&modulesOnly=false&runModule=true:8011:29
scheduleUpdateOnFiber@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=br.com.ixcsoft.ixcauthy&modulesOnly=false&runModule=true:16690:47
dispatchSetState@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=br.com.ixcsoft.ixcauthy&modulesOnly=false&runModule=true:11518:43
dispatchSetState@[native code]
http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=br.com.ixcsoft.ixcauthy&modulesOnly=false&runModule=true:128553:25
http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=br.com.ixcsoft.ixcauthy&modulesOnly=false&runModule=true:131370:22
http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=br.com.ixcsoft.ixcauthy&modulesOnly=false&runModule=true:132267:21
dispatch@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=br.com.ixcsoft.ixcauthy&modulesOnly=false&runModule=true:132175:31
dispatch@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=br.com.ixcsoft.ixcauthy&modulesOnly=false&runModule=true:131984:32
http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=br.com.ixcsoft.ixcauthy&modulesOnly=false&runModule=true:132010:26
withStack@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=br.com.ixcsoft.ixcauthy&modulesOnly=false&runModule=true:131996:21
http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=br.com.ixcsoft.ixcauthy&modulesOnly=false&runModule=true:132008:29
http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=br.com.ixcsoft.ixcauthy&modulesOnly=false&runModule=true:121498:37
tryCallOne@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=br.com.ixcsoft.ixcauthy&modulesOnly=false&runModule=true:27625:16
http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=br.com.ixcsoft.ixcauthy&modulesOnly=false&runModule=true:27706:27
http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=br.com.ixcsoft.ixcauthy&modulesOnly=false&runModule=true:28785:26
_callTimer@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=br.com.ixcsoft.ixcauthy&modulesOnly=false&runModule=true:28700:17
_callReactNativeMicrotasksPass@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=br.com.ixcsoft.ixcauthy&modulesOnly=false&runModule=true:28733:17
callReactNativeMicrotasks@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=br.com.ixcsoft.ixcauthy&modulesOnly=false&runModule=true:28897:44
__callReactNativeMicrotasks@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=br.com.ixcsoft.ixcauthy&modulesOnly=false&runModule=true:3640:46
http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=br.com.ixcsoft.ixcauthy&modulesOnly=false&runModule=true:3440:45
__guard@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=br.com.ixcsoft.ixcauthy&modulesOnly=false&runModule=true:3620:15
flushedQueue@http://localhost:8081/index.bundle?platform=android&dev=true&minify=false&app=br.com.ixcsoft.ixcauthy&modulesOnly=false&runModule=true:3439:21
flushedQueue@[native code]
invokeCallbackAndReturnFlushedQueue@[native code]

talesborn commented 1 year ago

In babel.config.js i have this:

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

stanrud commented 1 year ago

In babel.config.js i have this:

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

Did you import reanimated in the top of main js file?

import 'react-native-reanimated'

valery-lavrik commented 1 year ago

@talesborn this is because the camera does not work when the debugger is enabled. Disable debugging

talesborn commented 1 year ago

@stanrud your code is equal my, i imported the react-native-reanimated in my firs file, before the AppRegister

talesborn commented 1 year ago

@talesborn this is because the camera does not work when the debugger is enabled. Disable debugging

@valery-lavrik, how can i disable the debugger? So, i need to compile the app in release mode?

valery-lavrik commented 1 year ago

in the developer menu

talesborn commented 1 year ago

@valery-lavrik i not see the option in menu

valery-lavrik commented 1 year ago

in your case, this is the debug item

rodgomesc / vision-camera-code-scanner