React Native Vision Camera — High-Performance Camera for Mobile

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/