skills.rest
margelo
margeloOFFICIAL
Explore all skills by this author →
Website𝕏@margelo_comGitHub

react-native-vision-camera

Guides React Native VisionCamera v5 setup, migration, capture, outputs, and frame processing.

172|8|Updated Apr 13, 2026
Search Tags:#migration#mobile#react-native#camera#nitro-modules#visioncamera#frame-processor
One-click install
npx skills add https://github.com/margelo/react-native-skills --skill react-native-vision-camera-margelo
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-native-vision-camera
Source: https://github.com/margelo/react-native-skills/tree/main/skills/react-native-vision-camera
Command: npx skills add https://github.com/margelo/react-native-skills --skill react-native-vision-camera-margelo

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? React Native VisionCamera v5 is a full Nitro Modules rewrite that breaks nearly every v4 API surface, so developers porting camera features or building new ones face renamed props, removed methods, and undocumented pitfalls. This Skill routes each task to the correct reference and enforces the non-negotiable v5 rules so generated camera code actually compiles and runs. ## Core Features & Use Cases - V4 to V5 Migration: Maps removed APIs like takePhoto, useCameraFormat, and codeScanner to their v5 equivalents, with full before/after screen templates for photo, video, ML scanning, and barcode screens. - Outputs and Constraints Guidance: Explains the outputs={[...]} architecture, priority-ordered constraints for fps/HDR/resolution, and session lifecycle management with isActive. - Capture and Frame Processing: Covers in-memory photo capture, Recorder lifecycle, manual AE/AF/AWB locks, worklet-based frame processors with mandatory frame.dispose(), and Nitro-based native plugins. - Use Case: A developer upgrading a v4 barcode scanner screen asks for help; the Skill loads the migration reference, replaces useCodeScanner with the react-native-vision-camera-barcode-scanner package, and produces working v5 code. ## Quick Start Ask the assistant to migrate your v4 VisionCamera screen to v5 or to scaffold a new v5 camera screen with photo capture and outputs.

Frequently Asked Questions about react-native-vision-camera

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I migrate react-native-vision-camera from v4 to v5?▼

Replace boolean props like photo, video, and frameProcessor with outputs created via usePhotoOutput, useVideoOutput, and useFrameOutput. Remove useCameraFormat and the format prop in favor of the constraints array, and swap takePhoto for photoOutput.capturePhoto(settings, callbacks).

How do I take a photo in VisionCamera v5?▼

Create a photo output with usePhotoOutput, attach it via the outputs prop, then call photoOutput.capturePhoto(settings, callbacks) which returns an in-memory Photo object. Use capturePhotoToFile only when you explicitly need a file path.

Does VisionCamera v5 support barcode scanning?▼

Yes, but not in core. Install the separate react-native-vision-camera-barcode-scanner package, which uses MLKit on both iOS and Android. For iOS-only QR, face, or body detection without an ML dependency, use the built-in useObjectOutput instead.

Why does my VisionCamera v5 app crash after install?▼

Most native crashes come from missing peer dependencies. Verify react-native-nitro-modules and react-native-nitro-image are installed, and for frame processors also install react-native-vision-camera-worklets plus Software Mansion's react-native-worklets, then run pod install.

Why is my VisionCamera frame processor dropping frames or stalling?▼

Frames come from a bounded buffer pool, so every Frame and Depth object must be disposed with frame.dispose(), ideally in a try/finally block. When offloading with asyncRunner.runAsync, dispose inside the callback if it returned true and immediately if it returned false.

Can I use runAtTargetFps or react-native-worklets-core with VisionCamera v5?▼

No. runAtTargetFps was removed; throttle by counting frames in a worklet or offload via useAsyncRunner backpressure. The worklets engine is now Software Mansion's react-native-worklets, so uninstall react-native-worklets-core and its babel plugin.

Related Skills

Explore More Software Engineering Skills→
huytdps13400huytdps13400
34

react-native-vision-camera

Configure React Native Vision Camera for photo, video, and barcode scanning.

Community
Advanced
bhaktofmahakalbhaktofmahakal
2

senior-computer-vision

Builds and optimizes computer vision systems for detection, segmentation, and production inference.

Community
Intermediate
jonlucajonluca
3

build-nitro-modules

Generate React Native Nitro Modules with Nitrogen codegen and native bindings.

Community
Advanced
projectbluefinprojectbluefin
134

receiving-code-review

Evaluate and respond to code review feedback with technical verification.

Official
Intermediate