Getting Started

Introduction

VisionCamera is the fastest and most powerful Camera for react-native. It's built with Nitro Modules and uses AVFoundation on iOS, and CameraX on Android. VisionCamera features an extensible API, allowing you to plug in native code at any point.

Installation

1. Install library

Install react-native-vision-camera from npm:

npm install react-native-vision-camera

pnpm add react-native-vision-camera

yarn add react-native-vision-camera

bun add react-native-vision-camera

VisionCamera is built on-top of react-native-nitro-modules and uses react-native-nitro-image's Image type for photos - install those dependencies:

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

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

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

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

2. Add permissions

After installing the library from npm, you must add Camera (and optionally Microphone) usage permissions to your app's manifest:

Add Camera (and optionally Microphone) permissions to your Expo config (app.json, app.config.json or app.config.js):

{
  "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"]
  }
}

iOS

Add NSCameraUsageDescription (and optionally NSMicrophoneUsageDescription) permissions to your app's Info.plist:

<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>

Android

Add CAMERA (and optionally RECORD_AUDIO) permissions to your app's main AndroidManifest.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>

3. Rebuild native

Then, compile the mods:

npx expo prebuild

And lastly, to apply the native changes build a new binary:

npx expo run:ios

Then, rebuild Pods:

npx pod-install

And lastly, to apply the native changes build a new binary:

npm run ios

4. Render the `<Camera />`

In your app's code, you can now request permissions and render the <Camera /> view:

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 }}
      device="back"
    />
  )
}

5. Add outputs

The Camera can output to a variety of Camera Outputs - for example, to capture Photos, use the CameraPhotoOutput:

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 }}
      device="back"
      outputs={[photoOutput]}
    />
  )
}

See "Camera Outputs" to learn more about outputs.

On this page