# react-native-vision-camera

A routing skill for VisionCamera v5 in React Native: it tells the agent which reference to load for the task and which v5 rules to respect.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 702 installs · ★ 178
- Author: margelo
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/margelo/react-native-skills/tree/HEAD/skills/react-native-vision-camera/SKILL.md
- Updated: 2026-08-21
- HTML: https://affpapa.org/en/nevibecode/skills/react-native-vision-camera

## What it does

The skill works as a router. `SKILL.md` holds a task-to-reference table, and the agent opens only the file it needs: install and permissions, porting from v4, outputs and constraints, frame processing, capture and manual controls, advanced features. Each reference stands alone, so nothing extra lands in the context.

The hard rules for v5 are the main draw. The release is rebuilt on Nitro Modules: the `photo` and `video` props are gone in favour of an `outputs` array, `format` and `useCameraFormat` gave way to `constraints`, and `takePhoto()` is replaced by `capturePhoto` on the output object. An agent still thinking in v4 will produce code that does not run.

Peer dependencies come first: `react-native-nitro-modules` and `react-native-nitro-image`. Frame processors also need `react-native-vision-camera-worklets` plus Software Mansion's `react-native-worklets`. Every `Frame` has to be released with `.dispose()` inside a `finally` block, because the buffer pool is finite and a leaked frame stalls the pipeline.

Day-to-day work is the target: a camera screen, stills, video recording, barcodes. For heavy per-frame work the authors point to a separate skill, `react-native-vision-camera-realtime`.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add margelo/react-native-skills --skill react-native-vision-camera -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/react-native-vision-camera/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/react-native-vision-camera/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add margelo/react-native-skills --skill react-native-vision-camera -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/react-native-vision-camera/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add margelo/react-native-skills --skill react-native-vision-camera -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/react-native-vision-camera/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install margelo/react-native-skills react-native-vision-camera
```

2. **Manually: put the files in place**
- File: `.github/skills/react-native-vision-camera/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add margelo/react-native-skills --skill react-native-vision-camera -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/margelo/react-native-skills --path skills/react-native-vision-camera
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/react-native-vision-camera/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add margelo/react-native-skills --skill react-native-vision-camera -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/margelo/react-native-skills/tree/HEAD/skills/react-native-vision-camera/SKILL.md

## When to use it
- move a camera screen from VisionCamera v4 to v5
- pick fps and resolution with constraints instead of formats
- capture a still into memory without temp files
- find out which packages frame processors require
- pull the barcode scanner out of core into its own package

## Example prompts
- Rewrite my capture screen from `takePhoto` to the VisionCamera v5 API
- Show me how to build an `outputs` array from `usePhotoOutput` and `useVideoOutput`
- Set `constraints` for 60 fps and explain where `frame.dispose()` goes

## Similar
- [vercel-react-native-skills](https://affpapa.org/en/nevibecode/skills/vercel-react-native-skills.md) — skill · 255200 installs
- [animate-expo](https://affpapa.org/en/nevibecode/skills/animate-expo.md) — skill · 137900 installs
- [mobile-native](https://affpapa.org/en/nevibecode/skills/mobile-native.md) — skill · 86600 installs
- [aso](https://affpapa.org/en/nevibecode/skills/aso.md) — skill · 75400 installs
- [swiftui-pro](https://affpapa.org/en/nevibecode/skills/swiftui-pro.md) — skill · 35200 installs
- [orca-emulator](https://affpapa.org/en/nevibecode/skills/orca-emulator.md) — skill · 5800 installs

From the same set: [margelo/react-native-skills](https://affpapa.org/en/nevibecode/by/margelo/react-native-skills.md) — 6 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md