{"id":11809,"library":"react-native-vision-camera","title":"React Native VisionCamera","description":"VisionCamera is a high-performance, feature-rich camera library for React Native, currently at version 5.0.1. It provides direct access to camera hardware, supporting advanced features like custom frame processing (via C++ JSI) and granular control over camera devices and capabilities. Version 5.0.0 marked a significant rewrite, building upon 'Nitro Modules' and introducing a new 'Constraints API' for more flexible camera configuration. The library maintains a regular release cadence, with frequent patch updates addressing bugs and minor features within major versions, and new major versions (like v5) introducing substantial architectural changes. Its key differentiators include superior performance, direct native control, and advanced customization options not typically found in simpler camera abstractions.","status":"active","version":"5.0.1","language":"javascript","source_language":"en","source_url":"https://github.com/mrousavy/react-native-vision-camera","tags":["javascript","react-native","camera","react-native-camera","vision-camera","photo","video","frame-processor","frame-processing","typescript"],"install":[{"cmd":"npm install react-native-vision-camera","lang":"bash","label":"npm"},{"cmd":"yarn add react-native-vision-camera","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-native-vision-camera","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for React Native components.","package":"react","optional":false},{"reason":"Core React Native dependency.","package":"react-native","optional":false},{"reason":"Required for VisionCamera v5+ due to architectural rewrite.","package":"react-native-nitro-modules","optional":false},{"reason":"Required for VisionCamera v5+ for image handling.","package":"react-native-nitro-image","optional":false}],"imports":[{"note":"VisionCamera is primarily designed for ES Modules and React Functional Components. CommonJS `require` is not recommended.","wrong":"const Camera = require('react-native-vision-camera')","symbol":"Camera","correct":"import { Camera } from 'react-native-vision-camera'"},{"note":"This hook provides access to available camera devices (e.g., 'back', 'front').","symbol":"useCameraDevice","correct":"import { useCameraDevice } from 'react-native-vision-camera'"},{"note":"Essential hook for checking and requesting camera permissions.","symbol":"useCameraPermission","correct":"import { useCameraPermission } from 'react-native-vision-camera'"},{"note":"Used for defining custom C++ frame processing functions with JSI.","symbol":"useFrameProcessor","correct":"import { useFrameProcessor } from 'react-native-vision-camera'"}],"quickstart":{"code":"import React, { useEffect } from 'react';\nimport { View, Text, StyleSheet, Linking, Alert } from 'react-native';\nimport { Camera, useCameraDevice, useCameraPermission } from 'react-native-vision-camera';\n\nconst App = () => {\n  const { hasPermission, requestPermission } = useCameraPermission();\n  const device = useCameraDevice('back');\n\n  useEffect(() => {\n    if (!hasPermission) {\n      requestPermission().then(granted => {\n        if (!granted) {\n          Alert.alert(\n            'Permission Required',\n            'Camera access is required to use this feature. Please enable it in settings.',\n            [\n              { text: 'Cancel', style: 'cancel' },\n              { text: 'Open Settings', onPress: () => Linking.openSettings() }\n            ]\n          );\n        }\n      });\n    }\n  }, [hasPermission, requestPermission]);\n\n  if (!hasPermission) {\n    return <Text style={styles.permissionText}>Requesting Camera Permission...</Text>;\n  }\n\n  if (device == null) {\n    return <Text style={styles.permissionText}>No Camera Device Found.</Text>;\n  }\n\n  return (\n    <View style={styles.container}>\n      <Camera\n        style={StyleSheet.absoluteFill}\n        device={device}\n        isActive={true}\n        photo={true} // Enable photo capture\n        video={true} // Enable video capture\n        // frameProcessor={frameProcessor} // Uncomment for custom frame processing\n        // frameProcessorFps={30} // Set frame processor FPS\n      />\n    </View>\n  );\n};\n\nconst styles = StyleSheet.create({\n  container: {\n    flex: 1,\n    backgroundColor: 'black',\n  },\n  permissionText: {\n    flex: 1,\n    color: 'white',\n    textAlign: 'center',\n    textAlignVertical: 'center',\n    fontSize: 18,\n  },\n});\n\nexport default App;","lang":"typescript","description":"This code snippet demonstrates requesting camera permissions and rendering a basic camera preview using the back camera. It includes checks for permissions and device availability."},"warnings":[{"fix":"Refer to the official VisionCamera v5 deep-dive blog post and new documentation at `blog.margelo.com/whats-new-in-visioncamera-v5` and `visioncamera.margelo.com` for detailed migration instructions and new API usage.","message":"VisionCamera v5.0.0 is a complete rewrite based on 'Nitro Modules' and introduces a new 'Constraints API'. Migration from v4 will require significant code changes, including updating imports, camera configuration, and potentially adapting to new APIs for frame processing and other features. Ensure `react-native-nitro-modules` and `react-native-nitro-image` are installed.","severity":"breaking","affected_versions":">=5.0.0"},{"fix":"Migrate `videoBitRate` from the `startRecording` options object to a prop directly on the `<Camera />` component: `<Camera videoBitRate={5000000} />`.","message":"The `videoBitRate` prop was moved from `startRecording({ ... })` options to a direct prop on the `<Camera />` component in v4.6.0. This change was made to enable Android support for `videoBitRate`.","severity":"breaking","affected_versions":">=4.6.0"},{"fix":"Follow the official installation guide to add `NSCameraUsageDescription` and `NSMicrophoneUsageDescription` (for video) to `Info.plist` on iOS, and `android.permission.CAMERA` and `android.permission.RECORD_AUDIO` to `AndroidManifest.xml` on Android.","message":"Camera permissions must be explicitly added to your application's `Info.plist` (iOS) and `AndroidManifest.xml` (Android) files. The library cannot function without these native manifest entries.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"After `npm install`, ensure `npx pod-install` is run for iOS. For Android, rebuild your app and clear Gradle caches if encountering linking errors. Check `react-native.config.js` for auto-linking issues.","message":"Linking native modules properly is crucial. Issues often arise from incorrect `pod install` or Android project configuration after installing the package or upgrading React Native.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Implement robust error handling and fallback UI for when `useCameraDevice` returns `null`. Check for library updates, as fixes for such issues are frequently released (e.g., v4.7.1 addressed a case where no camera devices were loaded on app start).","message":"Certain devices might not load camera devices correctly on app start, leading to a `No Camera Device Found` error or similar initialization exceptions.","severity":"gotcha","affected_versions":">=4.7.1"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Run `npx pod-install` in your iOS directory and rebuild your app for both platforms. Ensure `react-native-vision-camera` is properly added to `package.json` and `node_modules`.","cause":"Native module not linked or found. Common after `npm install` without rebuilding native projects, or during React Native upgrades.","error":"Invariant Violation: 'RCTVisionCamera' could not be found. Are you sure 'react-native-vision-camera' is installed and linked correctly?"},{"fix":"Use `useCameraPermission()` hook to request permissions at runtime and ensure the correct permission declarations are present in `AndroidManifest.xml` (Android) and `Info.plist` (iOS).","cause":"The application does not have the necessary camera permissions from the user or the `AndroidManifest.xml`/`Info.plist` entries are missing.","error":"Error: Permission denied. Make sure to request Camera permission."},{"fix":"Ensure `npx pod-install` has been run and Xcode project settings correctly link the `VisionCamera` framework. Clean Xcode build folder and rebuild.","cause":"iOS linker error, typically indicating that the VisionCamera framework is not correctly linked or embedded.","error":"Undefined symbol: _OBJC_CLASS_$_VisionCameraView"},{"fix":"Install the required peer dependencies: `npm install react-native-nitro-modules react-native-nitro-image` and then run `npx pod-install` and rebuild your app.","cause":"VisionCamera v5.0.0+ has new peer dependencies that must be explicitly installed.","error":"Could not find `react-native-nitro-modules` (or `react-native-nitro-image`) in `node_modules`."}],"ecosystem":"npm"}