react-native-vision-camera

Name: react-native-vision-camera
Author: margelo

437installs7forks

How to install react-native-vision-camera?

margelo/react-native-skills/react-native-vision-camera

$npx -y skills add margelo/react-native-skills --skill react-native-vision-camera

Installs into the current project.

Summary

Best-practices guide for react-native-vision-camera v5 (Nitro rewrite, April 2026) and migrating from v4. Use when installing, configuring, or writing code with the Camera, outputs, frame processors, recording, or barcode/depth/RAW features. Also use when converting v4 code (phot

Files · 1

View on GitHub

SKILL.md

1	# react-native-vision-camera (v5)
2
3	VisionCamera v5 is the maintained and latest version of `react-native-vision-camera`. It is a full Nitro Modules rewrite with a new Constraints API, Output-based architecture, in-memory `Photo`, and a hard break from the v4 format/prop model. Almost every v4 surface is gone or renamed — treat v5 as a new API, not an incremental upgrade.
4
5	This skill is a router. Read this file first, then load the reference that matches the task. Every reference is self-contained — do not load more than you need.
6
7	## When to load which reference
8
9	- New install, getting a Camera on screen, permissions, minimum boilerplate → [references/quickstart-v5.md](references/quickstart-v5.md)
10	- Porting a v4 codebase, understanding what changed → [references/migration-v4-to-v5.md](references/migration-v4-to-v5.md) (load this FIRST when the user mentions v4, takePhoto, useCameraFormat, format prop, photo/video boolean props, or CodeScanner in core)
11	- *Porting a whole v4 screen* — want a complete before/after file to transplant** → [references/migration-templates.md](references/migration-templates.md) (full copy-paste templates: photo screen, video screen, frame-processor+ML, barcode scanner, pro camera)
12	- Choosing/attaching outputs, fps/HDR/resolution via constraints, session lifecycle → [references/outputs-and-constraints.md](references/outputs-and-constraints.md)
13	- Frame Processors, worklets, async frame work, pixel formats, writing a native plugin → [references/frame-processors.md](references/frame-processors.md) (load this when user says "frame processor", "worklet", "ML on frames", "Nitro plugin", "vision-camera-plugin-*")
14	- Capturing photos (incl. callbacks, RAW, HDR, preview image), recording video, Recorder lifecycle, manual AE/AF/AWB, exposure bias, zoom, focus → [references/capture-and-controls.md](references/capture-and-controls.md)
15	- Depth streaming, multi-cam, Skia preview, GPU resizer for ML, barcode scanner package, GPS location metadata, custom native outputs → [references/advanced-features.md](references/advanced-features.md)
16
17	When in doubt, load [references/migration-v4-to-v5.md](references/migration-v4-to-v5.md) — it covers the shape of the new API by contrasting it with v4 and is the fastest orientation.
18
19	## Non-negotiable rules for v5 code
20
21	These are the rules that catch people who "know" v4. Apply them without asking:
22
23	1. Install the Nitro peers. `react-native-nitro-modules` and `react-native-nitro-image` are required peer deps. Frame processors additionally require `react-native-vision-camera-worklets` AND `react-native-worklets` (Software Mansion's — not `-core`). Worklets - https://docs.swmansion.com/react-native-worklets/docs/
24	2. `outputs={[...]}` replaces `photo` / `video` / `frameProcessor` / `codeScanner` props. Create outputs with `usePhotoOutput`, `useVideoOutput`, `useFrameOutput`, `useDepthOutput`, `useObjectOutput` (or `useBarcodeScannerOutput` from the barcode package) and pass them in an array. Capture methods (`capturePhoto`, `createRecorder`) live on the Output, not the Camera ref.
25	3. There is no `format` prop and no `useCameraFormat`. Use `constraints={[...]}` — array order = priority, descending. The Camera negotiates the closest supported config automatically, so an impossible constraint like `{ fps: 99999 }` never throws.
26	4. `takePhoto()` does not exist. Use `photoOutput.capturePhoto(settings, callbacks)` for in-memory `Photo`, or `photoOutput.capturePhotoToFile(...)` for a file path. The default path is in-memory — do not write temp files unless explicitly asked.
27	5. Frame Processor plugins must be Nitro Modules. The v4 `FrameProcessorPlugin` base class, `VISION_EXPORT_SWIFT_FRAME_PROCESSOR` macro, and `VisionCameraProxy.addFrameProcessorPlugin` are gone. A v5 plugin is a `HybridObject` with a typed Nitro spec. See [references/frame-processors.md](references/frame-processors.md).
28	6. Every `Frame` (and `Depth`) MUST be `.dispose()`d. The buffer pool is bounded; leaking a frame stalls the pipeline. Wrap work in `try { ... } finally { frame.dispose() }`. When offloading via `asyncRunner.runAsync(...)`, dispose inside the async callback if it returned `true`, and dispose immediately in the `else` branch when it returned `false`.
29	7. CodeScanner is not in core. `react-native-vision-camera-barcode-scanner` is a separate package, MLKit-based on both platforms. For iOS-only object detection (QR, faces, bodies via native AVFoundation metadata, no ML dep), use `useObjectOutput` from core.
30	8. **Keep the Cam

People who liked this also viewed

6 picks

Type

react-native-vision-camera

437installs7forks

View on GitHub

How to install react-native-vision-camera?

margelo/react-native-skills/react-native-vision-camera

$npx -y skills add margelo/react-native-skills --skill react-native-vision-camera

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# react-native-vision-camera (v5)
2
3	VisionCamera v5 is the maintained and latest version of `react-native-vision-camera`. It is a full Nitro Modules rewrite with a new Constraints API, Output-based architecture, in-memory `Photo`, and a hard break from the v4 format/prop model. Almost every v4 surface is gone or renamed — treat v5 as a new API, not an incremental upgrade.
4
5	This skill is a router. Read this file first, then load the reference that matches the task. Every reference is self-contained — do not load more than you need.
6
7	## When to load which reference
8
9	- New install, getting a Camera on screen, permissions, minimum boilerplate → [references/quickstart-v5.md](references/quickstart-v5.md)
10	- Porting a v4 codebase, understanding what changed → [references/migration-v4-to-v5.md](references/migration-v4-to-v5.md) (load this FIRST when the user mentions v4, takePhoto, useCameraFormat, format prop, photo/video boolean props, or CodeScanner in core)
11	- *Porting a whole v4 screen* — want a complete before/after file to transplant** → [references/migration-templates.md](references/migration-templates.md) (full copy-paste templates: photo screen, video screen, frame-processor+ML, barcode scanner, pro camera)
12	- Choosing/attaching outputs, fps/HDR/resolution via constraints, session lifecycle → [references/outputs-and-constraints.md](references/outputs-and-constraints.md)
13	- Frame Processors, worklets, async frame work, pixel formats, writing a native plugin → [references/frame-processors.md](references/frame-processors.md) (load this when user says "frame processor", "worklet", "ML on frames", "Nitro plugin", "vision-camera-plugin-*")
14	- Capturing photos (incl. callbacks, RAW, HDR, preview image), recording video, Recorder lifecycle, manual AE/AF/AWB, exposure bias, zoom, focus → [references/capture-and-controls.md](references/capture-and-controls.md)
15	- Depth streaming, multi-cam, Skia preview, GPU resizer for ML, barcode scanner package, GPS location metadata, custom native outputs → [references/advanced-features.md](references/advanced-features.md)
16
17	When in doubt, load [references/migration-v4-to-v5.md](references/migration-v4-to-v5.md) — it covers the shape of the new API by contrasting it with v4 and is the fastest orientation.
18
19	## Non-negotiable rules for v5 code
20
21	These are the rules that catch people who "know" v4. Apply them without asking:
22
23	1. Install the Nitro peers. `react-native-nitro-modules` and `react-native-nitro-image` are required peer deps. Frame processors additionally require `react-native-vision-camera-worklets` AND `react-native-worklets` (Software Mansion's — not `-core`). Worklets - https://docs.swmansion.com/react-native-worklets/docs/
24	2. `outputs={[...]}` replaces `photo` / `video` / `frameProcessor` / `codeScanner` props. Create outputs with `usePhotoOutput`, `useVideoOutput`, `useFrameOutput`, `useDepthOutput`, `useObjectOutput` (or `useBarcodeScannerOutput` from the barcode package) and pass them in an array. Capture methods (`capturePhoto`, `createRecorder`) live on the Output, not the Camera ref.
25	3. There is no `format` prop and no `useCameraFormat`. Use `constraints={[...]}` — array order = priority, descending. The Camera negotiates the closest supported config automatically, so an impossible constraint like `{ fps: 99999 }` never throws.
26	4. `takePhoto()` does not exist. Use `photoOutput.capturePhoto(settings, callbacks)` for in-memory `Photo`, or `photoOutput.capturePhotoToFile(...)` for a file path. The default path is in-memory — do not write temp files unless explicitly asked.
27	5. Frame Processor plugins must be Nitro Modules. The v4 `FrameProcessorPlugin` base class, `VISION_EXPORT_SWIFT_FRAME_PROCESSOR` macro, and `VisionCameraProxy.addFrameProcessorPlugin` are gone. A v5 plugin is a `HybridObject` with a typed Nitro spec. See [references/frame-processors.md](references/frame-processors.md).
28	6. Every `Frame` (and `Depth`) MUST be `.dispose()`d. The buffer pool is bounded; leaking a frame stalls the pipeline. Wrap work in `try { ... } finally { frame.dispose() }`. When offloading via `asyncRunner.runAsync(...)`, dispose inside the async callback if it returned `true`, and dispose immediately in the `else` branch when it returned `false`.
29	7. CodeScanner is not in core. `react-native-vision-camera-barcode-scanner` is a separate package, MLKit-based on both platforms. For iOS-only object detection (QR, faces, bodies via native AVFoundation metadata, no ML dep), use `useObjectOutput` from core.
30	8. **Keep the Cam

People who liked this also viewed

6 picks

Type