react-native-vision-camera: frame-processor/unavailable: Frame Processors are not enabled🐛

What were you trying to do?

i upgraded my react-native to 70 and had to start using rn vision camera for my qrcode scanner, went through all the pain of figuring out how to reanimated and qrcode in both platforms, and got it working on android, but on ios it throw that error i read the guide and tried everything but to no success

Reproduceable Code

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


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

    const onSuccess = (qrcode) => {
        let url = qrcode.split('/').slice(0, -1).join('/').replace(/^(https?:\/\/)/, '');
        new StorageHelper().setItem('server', {url}).then(() => {
            global.navigation.replace('Webview');
        });
    };
    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])

    if (!camera.back) {
        return <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
            <ActivityIndicator size={50} color={'#ef7d00'}/>
        </View>
    }
    return (
        <View style={{backgroundColor: '#ef7d00', flex: 1}}>
            <StatusBar barStyle="light-content" backgroundColor="#ef7d00"/>
            <Camera
                device={camera.back}
                isActive={true}
                audio={false}
                frameProcessor={frameProcessor}
                frameProcessorFps={1}
                style={STYLES.container}>
            </Camera>
            <View style={{position: 'absolute', top: 0, bottom: 0, left: 0, right: 0}}>
                <View style={STYLES.header}>
                    <Text style={STYLES.textStyle}>
                        No sistema IXC Soft, clique com o botão direito do mouse em qualquer lugar e clique "<Text
                        style={STYLES.bold}>Integração mobile</Text>".
                        Em seguida, encaixe o<Text style={STYLES.bold}> QRCode </Text>que dentro do
                        quadrado desenhado abaixo
                    </Text>
                </View>
                <View style={STYLES.filler}/>
                <View style={STYLES.square}>
                    <View style={STYLES.outline}/>
                </View>
                <View style={STYLES.filler}/>
            </View>
        </View>
    );

}

export default Scanner;

What happened instead?

the screen opens as expected, but as soon as the camera starts, i get the error ERROR frame-processor/unavailable: Frame Processors are not enabled. See https://mrousavy.github.io/react-native-vision-camera/docs/guides/troubleshooting

in debug mode it throws that error, in release mode it just crashes

Relevant log output

No response

Device

iphone 7 ios 15.7

VisionCamera Version

i tried 2.14.1 and github:mrousavy/react-native-vision-camera#b7bb8e4 in the package.json

Additional information

I am using Expo
I have read the Troubleshooting Guide
I agree to follow this project’s Code of Conduct
I searched for similar issues in this repository and found none.

About this issue

Original URL
State: closed
Created 2 years ago
Reactions: 13
Comments: 35 (3 by maintainers)

Most upvoted comments

i downgraded my firebase stuff to 15.3.0 in order to not need use_frameworks

also also, always use npx pod-install on root folder instead of pod install on ios folder makes life easier

+10

valn1 on Nov 8, 2022

also, to make it work i had to keep the versions at exactly:

"react-native-reanimated": "2.10.0", "react-native-vision-camera": "2.14.1", "vision-camera-code-scanner": "0.2.0"

valn1 on Nov 8, 2022

podfile:

#$RNFirebaseAsStaticFramework = true ####removing this bit that the firebase lib suggested as a workaround
require_relative '../node_modules/react-native/scripts/react_native_pods'
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'


platform :ios, min_ios_version_supported
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

#### add this bit to enable defined build types which allows the user to build pods individually by architecture type
plugin 'cocoapods-user-defined-build-types'


target 'yourappname' do

  #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
  #  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
  #        end
  #      end
  #    end
  #end
  ####remove these pre_installer stuff, the rn-permissions and vision-camera-code-scanner suggested these workarounds, but we won't need'em anymore(not sure tho, keep'em commented)


####
  #use_frameworks! :linkage => :static
  #### here we change the use_frameworks! flag to this enable_user_defined_build_types! thing so we can specify we 
  #### want the camera stuff to be static_framework
  enable_user_defined_build_types!
####

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

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

  config = use_native_modules!

  # Flags change depending on the env values.
  flags = get_default_flags()

  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 => flags[:hermes_enabled],
    :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,
    #### I'm not using flipper here, but i imagine you can use it now as we are not using use_frameworks anymore
    # An absolute path to your application root.
    :app_path => "#{Pod::Config.instance.installation_root}/.."
  )
  #### the firebase and google stuff is a workaround that firebase suggested, i'm keeping it for mental health reasons, but 
  #### if you feel brave, go ahead and remove it 
  pod 'Firebase', :modular_headers => true
  pod 'FirebaseCore', :modular_headers => true
  pod 'FirebaseCoreInternal', :modular_headers => true
  pod 'GoogleUtilities', :modular_headers => true
  #### add these  3 guys bellow so the MLKit pods are installed as static_frameworks
  pod 'MLKitBarcodeScanning', :build_type => :static_framework
  pod 'MLKitCommon', :build_type => :static_framework
  pod 'MLKitVision', :build_type => :static_framework

  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
`

gemfile:
`source 'https://rubygems.org'

# You may use http://rbenv.org/ or https://rvm.io/ to install and use this version
ruby File.read(File.join(__dir__, '.ruby-version')).strip

gem 'cocoapods', '~> 1.11', '>= 1.11.3'

gem 'cocoapods-user-defined-build-types'

disclaimer: i use FCM stuff and vision camera for scanner and obviusly reanimated, so if you use some other libs, you might have to make your own changes, but i’m sure you will figure it out

valn1 on Feb 16, 2023

ohh, hello sorry in advance for the late reply, i had forgotten i made this issue

I managed to solve it

i had to use a patch i found somewhere, it’s for version 2.14.1 (ps. change the .txt to .patch before using)

react-native-vision-camera+2.14.1.txt

valn1 on Nov 8, 2022

Hi, stumbled here while having an issue with " Frame Processors are not enabled" on iOS, this seems to be related to the ads library I’m using that requires me to add “use_frameworks! :linkage => :static” in my pod file, so after adding right after it

  pre_install do |installer|
    installer.pod_targets.each do |pod|
      if pod.name.eql?('RNReanimated') || pod.name.eql?('VisionCamera')
        def pod.build_type
          Pod::BuildType.static_library
        end
      end
    end
  end

the issue seems solved.

umbertoghio on Apr 24, 2023

podfile:

#$RNFirebaseAsStaticFramework = true ####removing this bit that the firebase lib suggested as a workaround
require_relative '../node_modules/react-native/scripts/react_native_pods'
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'


platform :ios, min_ios_version_supported
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

#### add this bit to enable defined build types which allows the user to build pods individually by architecture type
plugin 'cocoapods-user-defined-build-types'


target 'yourappname' do

  #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
  #  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
  #        end
  #      end
  #    end
  #end
  ####remove these pre_installer stuff, the rn-permissions and vision-camera-code-scanner suggested these workarounds, but we won't need'em anymore(not sure tho, keep'em commented)


####
  #use_frameworks! :linkage => :static
  #### here we change the use_frameworks! flag to this enable_user_defined_build_types! thing so we can specify we 
  #### want the camera stuff to be static_framework
  enable_user_defined_build_types!
####

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

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

  config = use_native_modules!

  # Flags change depending on the env values.
  flags = get_default_flags()

  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 => flags[:hermes_enabled],
    :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,
    #### I'm not using flipper here, but i imagine you can use it now as we are not using use_frameworks anymore
    # An absolute path to your application root.
    :app_path => "#{Pod::Config.instance.installation_root}/.."
  )
  #### the firebase and google stuff is a workaround that firebase suggested, i'm keeping it for mental health reasons, but 
  #### if you feel brave, go ahead and remove it 
  pod 'Firebase', :modular_headers => true
  pod 'FirebaseCore', :modular_headers => true
  pod 'FirebaseCoreInternal', :modular_headers => true
  pod 'GoogleUtilities', :modular_headers => true
  #### add these  3 guys bellow so the MLKit pods are installed as static_frameworks
  pod 'MLKitBarcodeScanning', :build_type => :static_framework
  pod 'MLKitCommon', :build_type => :static_framework
  pod 'MLKitVision', :build_type => :static_framework

  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
`

gemfile:
`source 'https://rubygems.org'

# You may use http://rbenv.org/ or https://rvm.io/ to install and use this version
ruby File.read(File.join(__dir__, '.ruby-version')).strip

gem 'cocoapods', '~> 1.11', '>= 1.11.3'

gem 'cocoapods-user-defined-build-types'

disclaimer: i use FCM stuff and vision camera for scanner and obviusly reanimated, so if you use some other libs, you might have to make your own changes, but i’m sure you will figure it out

This seems to have fixed the issue for me; thanks!

ElectricCoffee on Mar 7, 2023

i decided to upgrade my react-native version again(did not learn from my mistakes) and ended up getting the same error as before, but this time i got it working fine

here is what i did:

first upgrade your react native version to the latest following the upgrade helper

second follow all the instructions on the vision-camera troubleshooting

third *add gem 'cocoapods-user-defined-build-types' to your gemfile on your podfile: *remove this $RNFirebaseAsStaticFramework = true if you have it *add gem 'plugin 'cocoapods-user-defined-build-types' before the targets *remove those pre_install workarounds that the libs suggested for working with use_frameworks! *replace use_frameworks! :linkage => :static or use_frameworks! with enable_user_defined_build_types! *add this to your target pod 'MLKitBarcodeScanning', :build_type => :static_framework pod 'MLKitCommon', :build_type => :static_framework pod 'MLKitVision', :build_type => :static_framework

finally clear your scode derived data, pods, podfile.lock, node_modules… everything and reinstall all again.

this should work and if my instructions are too hard to understand, i’m adding my podfile and gemfile to the next comment

disclaimer: the whole ‘cocoapods-user-defined-build-types’ thing changes the way you use your pods, so in case you have other pods that require the use_frameworks! flag, you might have to declare them like i’ve done to the MLKit stuff good luck and i hope to never have to do this again

valn1 on Feb 16, 2023

Hi!

I’ve spent several hours working to resolve this issue with the react-native-vision-camera package 📷. I’d like to share the potential solution I’ve found. Here’s a step-by-step guide:

Ensure Package Versions: First and foremost, please ensure these versions are specified in your package.json:

react-native-vision-camera: 2.15.2 react-native-reanimated: 2.17.0 vision-camera-code-scanner: 0.2.0 react-dom: ^18.2.0 react-native: 0.70.6

Android Cleanup: Navigate to the Android directory and execute the cleaning command:

cd android && ./gradlew clean

Yarn Cache and Android Start: Clear the yarn cache and initiate the Android application with:

yarn cache clean && yarn run android

iOS Build Cleanup: For iOS concerns, please delete the build folder:

rm -rf ios/build

CocoaPods Cleanup: Refresh your CocoaPods configurations in the iOS directory:

cd ios/
pod cache clean --all
pod deintegrate
pod install

Additional Cleanup: For a thorough cleanup, consider these steps:

watchman watch-del-all
rm -rf node_modules/ && npm install
rm -rf /tmp/metro-*.lock

🧩 Frame Processors are now enabled with these changes!

As a guiding note for future endeavors, for those starting new projects, I highly recommend using react-native-vision-camera version 3. This updated version offers enhanced features, better stability, and consistent support.

Furthermore, a special shoutout to mrousavy is essential. The development and enhancement of react-native-vision-camera have been monumental for the React Native community. Thank you, mrousavy, for your dedication and for arming developers with such invaluable tools.

Greetings!

tomyrodeghiero on Oct 24, 2023

Hey!

JFYI; VisionCamera V3 now includes a QR/Barcode Scanner! 😍 Check out the CodeScanner Documentation 🚀

Try upgrading to V3 if you can, it has a much more stable yet flexible foundation.

If you appreciate me dedicating my free time to improving VisionCamera and implementing features like the Code Scanner, please consider sponsoring me on GitHub 💖 to show your support.

mrousavy on Oct 6, 2023

Thanks for the solution

use “react-native-vision-camera”: “2.14.1”
use the patch from version 2.14.1 of vision camera.
use “react-native-reanimated”: “2.10.0”
use firebase 15.3.0

It worked for me on both (iOS and Android) for react native 0.70.6

i downgraded my firebase stuff to 15.3.0 in order to not need use_frameworks

also also, always use npx pod-install on root folder instead of pod install on ios folder makes life easier

cseluzha on Nov 17, 2022

My errors are different than yours, but with RN 0.7, I can’t seem to get ML kit frame processors to work in IOS.

bearsworth on Oct 20, 2022