React Native Vision Camera

https://mrousavy.com/react-native-vision-camera/docs/
Admin
React Native Vision Camera is the fastest and most powerful camera library for React Native, built...
Tokens:1,459
Snippets:23
Trust Score:7.7
Update:5 months ago
Show doc for...
Tokens:
Raw
### Install react-native-vision-camera with npm

Source: https://mrousavy.com/react-native-vision-camera/docs

Install the react-native-vision-camera library using npm.

```bash
npm install react-native-vision-camera
```

--------------------------------

### Install react-native-vision-camera with bun

Source: https://mrousavy.com/react-native-vision-camera/docs

Install the react-native-vision-camera library using bun.

```bash
bun add react-native-vision-camera
```

--------------------------------

### Install react-native-vision-camera with pnpm

Source: https://mrousavy.com/react-native-vision-camera/docs

Install the react-native-vision-camera library using pnpm.

```bash
pnpm add react-native-vision-camera
```

--------------------------------

### Install react-native-vision-camera with yarn

Source: https://mrousavy.com/react-native-vision-camera/docs

Install the react-native-vision-camera library using yarn.

```bash
yarn add react-native-vision-camera
```

--------------------------------

### Install Pods for iOS

Source: https://mrousavy.com/react-native-vision-camera/docs

After running `npx expo run:ios`, install the necessary CocoaPods dependencies.

```bash
npx pod-install
```

--------------------------------

### Install Nitro Modules and Image dependencies with bun

Source: https://mrousavy.com/react-native-vision-camera/docs

Install the required react-native-nitro-modules and react-native-nitro-image dependencies using bun.

```bash
bun add react-native-nitro-modules react-native-nitro-image
```

--------------------------------

### Render Camera View with Photo Output

Source: https://mrousavy.com/react-native-vision-camera/docs

Render the Camera component and configure it to use `CameraPhotoOutput` for capturing photos. This example also includes permission handling.

```javascript
import React, { useEffect } from 'react'
import { Camera, useCameraPermission, usePhotoOutput } from 'react-native-vision-camera'

function App() {
  const { hasPermission, requestPermission } = useCameraPermission()
  const photoOutput = usePhotoOutput()

  useEffect(() => {
    if (!hasPermission) requestPermission()
  }, [hasPermission, requestPermission])

  return (
    <Camera
      style={{ flex: 1 }}
      isActive={true}
      device="back"
      outputs={[photoOutput]}
    />
  )
}
```

--------------------------------

### Install Nitro Modules and Image dependencies with npm

Source: https://mrousavy.com/react-native-vision-camera/docs

Install the required react-native-nitro-modules and react-native-nitro-image dependencies using npm.

```bash
npm install react-native-nitro-modules react-native-nitro-image
```

--------------------------------

### Install Nitro Modules and Image dependencies with yarn

Source: https://mrousavy.com/react-native-vision-camera/docs

Install the required react-native-nitro-modules and react-native-nitro-image dependencies using yarn.

```bash
yarn add react-native-nitro-modules react-native-nitro-image
```

--------------------------------

### Rebuild native dependencies with Expo

Source: https://mrousavy.com/react-native-vision-camera/docs

After installing the library and configuring permissions, rebuild your native dependencies using the Expo CLI.

```bash
npx expo prebuild
```

--------------------------------

### Install Nitro Modules and Image dependencies with pnpm

Source: https://mrousavy.com/react-native-vision-camera/docs

Install the required react-native-nitro-modules and react-native-nitro-image dependencies using pnpm.

```bash
pnpm add react-native-nitro-modules react-native-nitro-image
```

--------------------------------

### Run iOS app with npm

Source: https://mrousavy.com/react-native-vision-camera/docs

Build and run your iOS application using npm after making native changes.

```bash
npm run ios
```

--------------------------------

### Render Camera View and request permission

Source: https://mrousavy.com/react-native-vision-camera/docs

Render the Camera component and request camera permission using the `useCameraPermission` hook. Ensure permission is requested when not already granted.

```javascript
import React, { useEffect } from 'react'
import { Camera, useCameraPermission } from 'react-native-vision-camera'

function App() {
  const { hasPermission, requestPermission } = useCameraPermission()

  useEffect(() => {
    if (!hasPermission) requestPermission()
  }, [hasPermission, requestPermission])

  return (
    <Camera
      style={{ flex: 1 }}
      isActive={true}
      device="back"
    />
  )
}
```

--------------------------------

### Run iOS app with Expo

Source: https://mrousavy.com/react-native-vision-camera/docs

Build and run your iOS application after making native changes using the Expo CLI.

```bash
npx expo run:ios
```

--------------------------------

### Add Camera and Microphone permissions to iOS Info.plist

Source: https://mrousavy.com/react-native-vision-camera/docs

Manually add Camera and Microphone usage descriptions to your iOS app's Info.plist file.

```xml
<dict>
  <!-- ... -->
  <key>NSCameraUsageDescription</key>
  <string>$(PRODUCT_NAME) needs access to your Camera to capture photos and videos.</string>
  <key>NSMicrophoneUsageDescription</key>
  <string>$(PRODUCT_NAME) needs access to your Microphone to record audio for video recordings.</string>
</dict>
```

--------------------------------

### Add Camera and Microphone permissions to Android Manifest

Source: https://mrousavy.com/react-native-vision-camera/docs

Declare Camera and Microphone permissions in your Android app's main AndroidManifest.xml file.

```xml
<manifest xmlns:android="http://schemas.android.com/apk/res/android">
  <!-- ... -->
  <uses-permission android:name="android.permission.CAMERA" />
  <uses-permission android:name="android.permission.RECORD_AUDIO" />
</manifest>
```

--------------------------------

### Add Camera and Microphone permissions to Expo config

Source: https://mrousavy.com/react-native-vision-camera/docs

Configure Camera and Microphone permissions in your Expo app's configuration file (app.json, app.config.json, or app.config.js).

```json
{
  "ios": {
    "infoPlist": {
      "NSCameraUsageDescription": "$(PRODUCT_NAME) needs access to your Camera to capture photos and videos.",
      "NSMicrophoneUsageDescription": "$(PRODUCT_NAME) needs access to your Microphone to record audio for video recordings."
    }
  },
  "android": {
    "permissions": ["android.permission.CAMERA", "android.permission.RECORD_AUDIO"]
  }
}
```
Tokens:
Raw