react-native-vision-camera
📸 A powerful, high-performance React Native Camera library.
Top Related Projects
📸 A powerful, high-performance React Native Camera library.
A Camera component for React Native. Also supports barcode scanning!
An unified permissions API for React Native on iOS, Android and Windows.
Quick Overview
React Native Vision Camera is a powerful and feature-rich camera library for React Native applications. It provides a high-performance, easy-to-use API for capturing photos, recording videos, and implementing advanced camera features like face detection and barcode scanning.
Pros
- High performance and low memory usage
- Extensive feature set including photo capture, video recording, and frame processors
- Support for both iOS and Android platforms
- Active development and community support
Cons
- Requires React Native 0.63 or higher
- Some advanced features may require additional setup or permissions
- Learning curve for developers new to camera APIs
- Limited support for older devices
Code Examples
- Basic camera setup:
import { Camera, useCameraDevices } from 'react-native-vision-camera';
function CameraComponent() {
const devices = useCameraDevices();
const device = devices.back;
if (device == null) return <LoadingView />;
return (
<Camera
style={StyleSheet.absoluteFill}
device={device}
isActive={true}
/>
);
}
- Capturing a photo:
const photo = await camera.current.takePhoto({
qualityPrioritization: 'speed',
flash: 'auto',
});
console.log(`Photo taken: ${photo.path}`);
- Recording a video:
const video = await camera.current.startRecording({
flash: 'on',
onRecordingFinished: (video) => console.log(video),
onRecordingError: (error) => console.error(error),
});
// Stop recording after 5 seconds
setTimeout(() => {
camera.current.stopRecording();
}, 5000);
Getting Started
-
Install the library:
npm install react-native-vision-camera
-
Add camera permissions to your app:
- iOS: Add
NSCameraUsageDescription
andNSMicrophoneUsageDescription
toInfo.plist
- Android: Add
<uses-permission android:name="android.permission.CAMERA" />
toAndroidManifest.xml
- iOS: Add
-
Import and use the Camera component in your React Native app:
import { Camera, useCameraDevices } from 'react-native-vision-camera'; function App() { const devices = useCameraDevices(); const device = devices.back; if (device == null) return <LoadingView />; return ( <Camera style={StyleSheet.absoluteFill} device={device} isActive={true} /> ); }
Competitor Comparisons
📸 A powerful, high-performance React Native Camera library.
Pros of react-native-vision-camera
- Identical repository names make comparison irrelevant
- Both repositories are the same project by the same author
Cons of react-native-vision-camera
- No meaningful differences to compare
- Identical repositories lead to redundant analysis
Code Comparison
As both repositories are identical, there are no code differences to highlight.
Additional Notes
The comparison request appears to be for the same repository: mrousavy/react-native-vision-camera. This project is a powerful camera library for React Native, offering features like:
- High-performance camera capture and processing
- Frame processors for real-time video analysis
- Support for photo, video, and RAW captures
- Extensive device controls (zoom, focus, exposure, etc.)
- Cross-platform compatibility (iOS and Android)
To provide a meaningful comparison, different repositories or projects would need to be specified. If you intended to compare this camera library with another React Native camera solution, please provide the name of the alternative project for a proper analysis.
A Camera component for React Native. Also supports barcode scanning!
Pros of react-native-camera
- More mature and established project with a larger community
- Supports a wider range of devices and older React Native versions
- Offers additional features like face detection and barcode scanning
Cons of react-native-camera
- Less performant compared to Vision Camera
- Slower development cycle and less frequent updates
- More complex API and configuration process
Code Comparison
react-native-camera:
<RNCamera
ref={ref => {
this.camera = ref;
}}
style={styles.preview}
type={RNCamera.Constants.Type.back}
flashMode={RNCamera.Constants.FlashMode.on}
androidCameraPermissionOptions={{
title: 'Permission to use camera',
message: 'We need your permission to use your camera',
buttonPositive: 'Ok',
buttonNegative: 'Cancel',
}}
/>
Vision Camera:
<Camera
style={StyleSheet.absoluteFill}
device={device}
isActive={true}
photo={true}
/>
Vision Camera offers a more streamlined API with fewer configuration options required for basic functionality. The code is more concise and easier to understand, while react-native-camera provides more granular control over camera settings and permissions.
An unified permissions API for React Native on iOS, Android and Windows.
Pros of react-native-permissions
- Broader scope: Handles various types of permissions beyond camera access
- Simpler API: Easier to use for general permission management
- More mature: Longer development history and wider adoption
Cons of react-native-permissions
- Less specialized: Doesn't provide advanced camera-specific features
- Performance: May be less optimized for camera-related tasks
- Updates: Potentially slower to adopt new platform-specific camera features
Code Comparison
react-native-permissions:
import { check, request, PERMISSIONS } from 'react-native-permissions';
const checkCameraPermission = async () => {
const result = await check(PERMISSIONS.IOS.CAMERA);
if (result === 'denied') {
await request(PERMISSIONS.IOS.CAMERA);
}
};
react-native-vision-camera:
import { Camera, useCameraPermission } from 'react-native-vision-camera';
function App() {
const { hasPermission, requestPermission } = useCameraPermission();
if (!hasPermission) {
requestPermission();
}
return <Camera />;
}
The react-native-permissions code is more generic and can handle various permission types, while react-native-vision-camera provides a more streamlined approach specifically for camera permissions and usage.
Convert
designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual CopilotREADME


Features
VisionCamera is a powerful, high-performance Camera library for React Native. It features:
- ð¸ Photo and Video capture
- ðï¸ QR/Barcode scanner
- ð± Customizable devices and multi-cameras ("fish-eye" zoom)
- ðï¸ Customizable resolutions and aspect-ratios (4k/8k images)
- â±ï¸ Customizable FPS (30..240 FPS)
- ð§© Frame Processors (JS worklets to run facial recognition, AI object detection, realtime video chats, ...)
- ð¨ Drawing shapes, text, filters or shaders onto the Camera
- ð Smooth zooming (Reanimated)
- â¯ï¸ Fast pause and resume
- ð HDR & Night modes
- â¡ Custom C++/GPU accelerated video pipeline (OpenGL)
Install VisionCamera from npm:
npm i react-native-vision-camera
cd ios && pod install
..and get started by setting up permissions!
Documentation
ShadowLens
To see VisionCamera in action, check out ShadowLens!
Example
function App() {
const device = useCameraDevice('back')
if (device == null) return <NoCameraErrorView />
return (
<Camera
style={StyleSheet.absoluteFill}
device={device}
isActive={true}
/>
)
}
See the example app
Adopting at scale
VisionCamera is provided as is, I work on it in my free time.
If you're integrating VisionCamera in a production app, consider funding this project and contact me to receive premium enterprise support, help with issues, prioritize bugfixes, request features, help at integrating VisionCamera and/or Frame Processors, and more.
Socials
- ð¦ Follow me on Twitter for updates
- ð Check out my blog for examples and experiments
- ð¬ Join the Margelo Community Discord for chatting about VisionCamera
- ð Sponsor me on GitHub to support my work
- ðª Buy me a Ko-Fi to support my work
Top Related Projects
📸 A powerful, high-performance React Native Camera library.
A Camera component for React Native. Also supports barcode scanning!
An unified permissions API for React Native on iOS, Android and Windows.
Convert
designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual Copilot