🐛 system/camera-module-not-found: Failed to initialize VisionCamera: The native Camera Module (`NativeModules.CameraView`) could not be found

[ginxx009]

What's happening?

This is a fresh react native project with version 0.71.14 and followed the instruction here .

Reproduceable Code

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 */
import React, { useEffect } from 'react';
import type {PropsWithChildren} from 'react';
import {
  ActivityIndicator,
  SafeAreaView,
  ScrollView,
  StatusBar,
  StyleSheet,
  Text,
  useColorScheme,
  View,
} from 'react-native';

import {
  Colors,
  DebugInstructions,
  Header,
  LearnMoreLinks,
  ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';

import { Camera, useCameraDevice, useCameraPermission } from 'react-native-vision-camera';

function App(): JSX.Element {
  const isDarkMode = useColorScheme() === 'dark';
  const {hasPermission, requestPermission} = useCameraPermission();
  const device = useCameraDevice('back');
  const backgroundStyle = {
    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
  };

  useEffect(() => {
    if(!hasPermission) {
      requestPermission();
    }
  }, [hasPermission]);

 const CameraAvailable = ({devicee}: {devicee: any}) => {
  if(!device) {
    console.log('No camera device available');
    return <Text>No camera device available</Text>;
  }

  return <Camera style={{width: 500, height: 500}} device={devicee} isActive={true}/>;
 }

  return (
    <SafeAreaView style={backgroundStyle}>
      <StatusBar
        barStyle={isDarkMode ? 'light-content' : 'dark-content'}
        backgroundColor={backgroundStyle.backgroundColor}
      />
      {device && 
      <CameraAvailable devicee={device}/>
      }
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  sectionContainer: {
    marginTop: 32,
    paddingHorizontal: 24,
  },
  sectionTitle: {
    fontSize: 24,
    fontWeight: '600',
  },
  sectionDescription: {
    marginTop: 8,
    fontSize: 18,
    fontWeight: '400',
  },
  highlight: {
    fontWeight: '700',
  },
});

export default App;

Relevant log output

system/camera-module-not-found: Failed to initialize VisionCamera: The native Camera Module (`NativeModules.CameraView`) could not be found.
* Make sure react-native-vision-camera is correctly autolinked (run `npx react-native config` to verify)
* Make sure you ran `pod install` in the ios/ directory.
* Make sure you rebuilt the app., js engine: hermes 
    at App (http://localhost:8081/index.bundle//&platform=ios&dev=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.VisionCameraProject:94695:54)
    at RCTView
    at View (http://localhost:8081/index.bundle//&platform=ios&dev=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.VisionCameraProject:45212:43)
    at RCTView
    at View (http://localhost:8081/index.bundle//&platform=ios&dev=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.VisionCameraProject:45212:43)
    at AppContainer (http://localhost:8081/index.bundle//&platform=ios&dev=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.VisionCameraProject:45077:36)
    at VisionCameraProject(RootComponent) (http://localhost:8081/index.bundle//&platform=ios&dev=true&minify=false&inlineSourceMap=false&modulesOnly=false&runModule=true&app=org.reactjs.native.example.VisionCameraProject:83249:28)
 ERROR  TypeError: Cannot read property 'CameraModule' of undefined

This error is located at:
    in App
    in RCTView (created by View)
    in View (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer
    in VisionCameraProject(RootComponent), js engine: hermes
 ERROR  TypeError: Cannot read property 'CameraModule' of undefined

This error is located at:
    in App
    in RCTView (created by View)
    in View (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer
    in VisionCameraProject(RootComponent), js engine: hermes

Camera Device

n/a

Device

iPhone 12(iOS17)

VisionCamera Version

3.9.0

Can you reproduce this issue in the VisionCamera Example app?

No, I cannot reproduce the issue in the Example app

Additional information

• [ ] I am using Expo
• [ ] I have enabled Frame Processors (react-native-worklets-core)
• [X] I have read the Troubleshooting Guide
• [X] I agree to follow this project's Code of Conduct
• [X] I searched for similar issues in this repository and found none.

[mrousavy]

What's the output of npx react-native config?

[ginxx009]

here's the npx react-native config

npx react-native config
warn Multiple Podfiles were found: ios/Podfile,vendor/bundle/ruby/2.7.0/gems/cocoapods-core-1.15.2/lib/cocoapods-core/Podfile. Choosing ios/Podfile automatically. If you would like to select a different one, you can configure it via "project.ios.sourceDir". You can learn more about it here: https://github.com/react-native-community/cli/blob/master/docs/configuration.md
{
  "root": "/Users/ginxx009/Documents/VisionCameraProject/VisionCameraProject",
  "reactNativePath": "/Users/ginxx009/Documents/VisionCameraProject/VisionCameraProject/node_modules/react-native",
  "dependencies": {
    "react-native-vision-camera": {
      "root": "/Users/ginxx009/Documents/VisionCameraProject/VisionCameraProject/node_modules/react-native-vision-camera",
      "name": "react-native-vision-camera",
      "platforms": {
        "ios": {
          "podspecPath": "/Users/ginxx009/Documents/VisionCameraProject/VisionCameraProject/node_modules/react-native-vision-camera/VisionCamera.podspec",
          "configurations": [],
          "scriptPhases": []
        },
        "android": {
          "sourceDir": "/Users/ginxx009/Documents/VisionCameraProject/VisionCameraProject/node_modules/react-native-vision-camera/android",
          "packageImportPath": "import com.mrousavy.camera.CameraPackage;",
          "packageInstance": "new CameraPackage()",
          "buildTypes": [],
          "componentDescriptors": [],
          "androidMkPath": "/Users/ginxx009/Documents/VisionCameraProject/VisionCameraProject/node_modules/react-native-vision-camera/android/build/generated/source/codegen/jni/Android.mk",
          "cmakeListsPath": "/Users/ginxx009/Documents/VisionCameraProject/VisionCameraProject/node_modules/react-native-vision-camera/android/build/generated/source/codegen/jni/CMakeLists.txt"
        }
      }
    }
  },
  "commands": [
    {
      "name": "log-ios",
      "description": "starts iOS device syslog tail"
    },
    {
      "name": "run-ios",
      "description": "builds your app and starts it on iOS simulator",
      "examples": [
        {
          "desc": "Run on a different simulator, e.g. iPhone SE (2nd generation)",
          "cmd": "react-native run-ios --simulator \"iPhone SE (2nd generation)\""
        },
        {
          "desc": "Run on a connected device, e.g. Max's iPhone",
          "cmd": "react-native run-ios --device \"Max's iPhone\""
        },
        {
          "desc": "Run on the AppleTV simulator",
          "cmd": "react-native run-ios --simulator \"Apple TV\"  --scheme \"helloworld-tvOS\""
        }
      ],
      "options": [
        {
          "name": "--simulator <string>",
          "description": "Explicitly set simulator to use. Optionally include iOS version between parenthesis at the end to match an exact version: \"iPhone 6 (10.0)\""
        },
        {
          "name": "--mode <string>",
          "description": "Explicitly set the scheme configuration to use"
        },
        {
          "name": "--configuration <string>",
          "description": "[Deprecated] Explicitly set the scheme configuration to use"
        },
        {
          "name": "--scheme <string>",
          "description": "Explicitly set Xcode scheme to use"
        },
        {
          "name": "--device [string]",
          "description": "Explicitly set device to use by name.  The value is not required if you have a single device connected."
        },
        {
          "name": "--udid <string>",
          "description": "Explicitly set device to use by udid"
        },
        {
          "name": "--verbose",
          "description": "Do not use xcbeautify or xcpretty even if installed"
        },
        {
          "name": "--port <number>",
          "default": 8081
        },
        {
          "name": "--terminal <string>",
          "description": "Launches the Metro Bundler in a new window using the specified terminal path.",
          "default": "Apple_Terminal"
        },
        {
          "name": "--xcconfig [string]",
          "description": "Explicitly set xcconfig to use"
        },
        {
          "name": "--buildFolder <string>",
          "description": "Location for iOS build artifacts. Corresponds to Xcode's \"-derivedDataPath\"."
        },
        {
          "name": "--no-packager",
          "description": "Do not launch packager while building"
        },
        {
          "name": "--binary-path <string>",
          "description": "Path relative to project root where pre-built .app binary lives."
        },
        {
          "name": "--list-devices",
          "description": "List all available iOS devices and simulators and let you choose one to run the app. "
        }
      ]
    },
    {
      "name": "build-ios",
      "description": "builds your app on iOS simulator",
      "examples": [
        {
          "desc": "Build the app for the IOS simulator",
          "cmd": "react-native build-ios"
        },
        {
          "desc": "Build the app for all IOS devices",
          "cmd": "react-native build-ios --mode \"Release\""
        },
        {
          "desc": "Build the app for a specific IOS device",
          "cmd": "react-native build-ios --simulator \"IPhone 11\""
        }
      ],
      "options": [
        {
          "name": "--simulator <string>",
          "description": "Explicitly set simulator to use. Optionally include iOS version between parenthesis at the end to match an exact version: \"iPhone 6 (10.0)\""
        },
        {
          "name": "--mode <string>",
          "description": "Explicitly set the scheme configuration to use"
        },
        {
          "name": "--configuration <string>",
          "description": "[Deprecated] Explicitly set the scheme configuration to use"
        },
        {
          "name": "--scheme <string>",
          "description": "Explicitly set Xcode scheme to use"
        },
        {
          "name": "--device [string]",
          "description": "Explicitly set device to use by name.  The value is not required if you have a single device connected."
        },
        {
          "name": "--udid <string>",
          "description": "Explicitly set device to use by udid"
        },
        {
          "name": "--verbose",
          "description": "Do not use xcbeautify or xcpretty even if installed"
        },
        {
          "name": "--port <number>",
          "default": 8081
        },
        {
          "name": "--terminal <string>",
          "description": "Launches the Metro Bundler in a new window using the specified terminal path.",
          "default": "Apple_Terminal"
        },
        {
          "name": "--xcconfig [string]",
          "description": "Explicitly set xcconfig to use"
        },
        {
          "name": "--buildFolder <string>",
          "description": "Location for iOS build artifacts. Corresponds to Xcode's \"-derivedDataPath\"."
        }
      ]
    },
    {
      "name": "log-android",
      "description": "starts logkitty"
    },
    {
      "name": "run-android",
      "description": "builds your app and starts it on a connected Android emulator or device",
      "options": [
        {
          "name": "--mode <string>",
          "description": "Specify your app's build variant"
        },
        {
          "name": "--variant <string>",
          "description": "Specify your app's build variant. Deprecated! Use 'mode' instead"
        },
        {
          "name": "--no-packager",
          "description": "Do not launch packager while building"
        },
        {
          "name": "--port <number>",
          "default": 8081
        },
        {
          "name": "--terminal <string>",
          "description": "Launches the Metro Bundler in a new window using the specified terminal path.",
          "default": "Apple_Terminal"
        },
        {
          "name": "--tasks <list>",
          "description": "Run custom Gradle tasks. By default it's \"assembleDebug\". Will override passed mode and variant arguments."
        },
        {
          "name": "--active-arch-only",
          "description": "Build native libraries only for the current device architecture for debug builds.",
          "default": false
        },
        {
          "name": "--extra-params <string>",
          "description": "Custom properties passed to gradle build command"
        },
        {
          "name": "--appId <string>",
          "description": "Specify an applicationId to launch after build. If not specified, `package` from AndroidManifest.xml will be used.",
          "default": ""
        },
        {
          "name": "--appIdSuffix <string>",
          "description": "Specify an applicationIdSuffix to launch after build.",
          "default": ""
        },
        {
          "name": "--main-activity <string>",
          "description": "Name of the activity to start",
          "default": "MainActivity"
        },
        {
          "name": "--deviceId <string>",
          "description": "builds your app and starts it on a specific device/simulator with the given device id (listed by running \"adb devices\" on the command line)."
        },
        {
          "name": "--list-devices",
          "description": "Lists all available Android devices and simulators and let you choose one to run the app",
          "default": false
        },
        {
          "name": "--binary-path <string>",
          "description": "Path relative to project root where pre-built .apk binary lives."
        }
      ]
    },
    {
      "name": "build-android",
      "description": "builds your app",
      "options": [
        {
          "name": "--mode <string>",
          "description": "Specify your app's build variant"
        },
        {
          "name": "--variant <string>",
          "description": "Specify your app's build variant. Deprecated! Use 'mode' instead"
        },
        {
          "name": "--no-packager",
          "description": "Do not launch packager while building"
        },
        {
          "name": "--port <number>",
          "default": 8081
        },
        {
          "name": "--terminal <string>",
          "description": "Launches the Metro Bundler in a new window using the specified terminal path.",
          "default": "Apple_Terminal"
        },
        {
          "name": "--tasks <list>",
          "description": "Run custom Gradle tasks. By default it's \"assembleDebug\". Will override passed mode and variant arguments."
        },
        {
          "name": "--active-arch-only",
          "description": "Build native libraries only for the current device architecture for debug builds.",
          "default": false
        },
        {
          "name": "--extra-params <string>",
          "description": "Custom properties passed to gradle build command"
        }
      ]
    }
  ],
  "healthChecks": [],
  "platforms": {
    "ios": {},
    "android": {}
  },
  "project": {
    "ios": {
      "sourceDir": "/Users/ginxx009/Documents/VisionCameraProject/VisionCameraProject/ios",
      "xcodeProject": {
        "name": "VisionCameraProject.xcworkspace",
        "isWorkspace": true
      }
    },
    "android": {
      "sourceDir": "/Users/ginxx009/Documents/VisionCameraProject/VisionCameraProject/android",
      "appName": "app",
      "packageName": "com.visioncameraproject"
    }
  }
}

[mrousavy]

Hm it did resolve properly - can you try clearing everything/cache to see if that fixes it?

[ginxx009]

tried clearing it actually and it did not resolve anything . By the way on android it works but on iOS it does not .

[juninhoall]

same issue =[

[k-saparia]

Same issue on my side while running yarn test

[ginxx009]

What I am trying to do right now is upgrade the react native versions to see where it is compatible .

[nthegedus]

Hi everyone, I'm not facing the same @ginxx009 error, but there's something wrong here

I'm trying this:

const { hasPermission, requestPermission } = useCameraPermission()
console.log('hasPermission:', hasPermission)

const devices = useCameraDevices()
console.log('devices: ', JSON.stringify(devices))

const device = useCameraDevice('back')
console.log('device:', device)

I've requested permission, and it's ok, but devices are empty, and I cannot set current device

LOG  hasPermission: true
LOG  devices:  []
LOG  device: undefined

I've already tried on Simulator and physical device, and got the same problem.

My env:

"react-native": "0.73.4",
"react-native-vision-camera": "3.9.0",

And already "react-native-vision-camera": "3.8.2"

This problems occurs on iOS. On Android the camera appears normally, but cant take photo because got this error capture/timed-out: (capture/timed-out The image capture was aborted because it timed out.

[ginxx009]

on 0.72 version of react native I have tried and on iOS and it works

[amisrs]

I started encountering the same issue camera-module-not-found on Android, but it stopped happening once I manually uninstalled the app from the physical device and reinstalled

"react-native": "^0.73.4",
"react-native-vision-camera": "^3.9.0",

[ginxx009]

Hi everyone . If you are still encountering this problem . What I did was

Make sure that the swift version you are using on your xcode is 5.2 . Mine was default 5.0 so I change it on the build setting of the xcode then rebuild it . And it was working for both iOS and Android.

[leonardorib]

@k-saparia

Same issue on my side while running yarn test

Has anyone with this problem when running tests managed to solve it?