# React Native Vision Camera — High-Performance Camera for Mobile

> A powerful camera library for React Native with frame processor plugins, QR/barcode scanning, photo and video capture, and direct access to native camera APIs for real-time ML and AR pipelines.

## Install

Save in your project root:

# React Native Vision Camera — High-Performance Camera for Mobile

## Quick Use
```bash
npm install react-native-vision-camera
npx pod-install
```
```jsx
import { Camera, useCameraDevice } from 'react-native-vision-camera';
const device = useCameraDevice('back');
if (!device) return <Text>No camera</Text>;
<Camera style={{ flex: 1 }} device={device} isActive={true} photo={true} video={true} />
```

## Introduction
React Native Vision Camera provides direct access to native camera hardware with a declarative React API. It supports photo capture, video recording, frame-by-frame processing, and code scanning while maintaining a consistent interface across iOS and Android.

## What React Native Vision Camera Does
- Captures high-resolution photos and 4K video with full exposure and focus controls
- Processes live camera frames in real-time using Frame Processor plugins
- Scans QR codes and barcodes natively without third-party services
- Supports multi-camera setups, torch control, and zoom gestures
- Provides direct integration points for ML Kit, TensorFlow Lite, and custom native models

## Architecture Overview
The library creates a native camera view backed by AVFoundation on iOS and CameraX on Android. Frame Processors are worklet functions (powered by react-native-worklets-core) that run synchronously on the camera thread, receiving pixel buffers each frame. This zero-copy pipeline enables ML inference at camera frame rate without JS thread involvement.

## Self-Hosting & Configuration
- Add camera and microphone permissions to Info.plist (iOS) and AndroidManifest.xml
- Configure `format`, `fps`, `hdr`, and `photoQualityBalance` props for capture quality
- Install frame processor plugins (e.g., `vision-camera-code-scanner`) for extended functionality
- Use `enableLocation` to embed GPS metadata in captured media
- Set `outputOrientation` and `videoStabilizationMode` for professional video output

## Key Features
- Frame Processors run on the camera thread for zero-latency ML inference
- Built-in code scanner for QR, EAN, UPC, Aztec, DataMatrix, and more
- Snapshot capture from video feed without interrupting recording
- Pinch-to-zoom and focus-on-tap with smooth animated transitions
- Photo and video output to temporary files or custom paths

## Comparison with Similar Tools
- **expo-camera** — simpler API but fewer controls; Vision Camera offers raw frame access
- **react-native-camera (deprecated)** — predecessor with less active maintenance
- **CameraKit** — similar goals but smaller community and plugin ecosystem
- **Native AVFoundation/CameraX** — same underlying APIs; Vision Camera wraps them in React

## FAQ
**Q: Can I run TensorFlow Lite models on camera frames?**
A: Yes. Install a Frame Processor plugin that wraps TFLite and process each frame in real-time.

**Q: Does it support simultaneous photo and video?**
A: Yes. Enable both `photo` and `video` props, then call `takePhoto()` while recording video.

**Q: How do I scan QR codes?**
A: Set `codeScanner={{ codeTypes: ['qr'], onCodeScanned: (codes) => {} }}` on the Camera component.

**Q: Is Expo supported?**
A: Yes, in bare and dev-client workflows. Expo Go does not support native modules, so a dev client build is needed.

## Sources
- https://github.com/mrousavy/react-native-vision-camera
- https://react-native-vision-camera.com/

---
Source: https://tokrepo.com/en/workflows/asset-738951f6
Author: AI Open Source