ContextQMD
Back to React Native Vision Camera

Getting Started

docs/content/docs/index.mdx

5.2.25.4 KB
Original Source

import { Tab, Tabs } from 'fumadocs-ui/components/tabs'

Introduction

VisionCamera is the fastest and most powerful Camera library 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:

<Tabs items={["npm", "pnpm", "yarn", "bun"]} groupId="package-manager" persist> <Tab value="npm">

bash
npm install react-native-vision-camera
</Tab> <Tab value="pnpm"> ```bash pnpm add react-native-vision-camera ``` </Tab> <Tab value="yarn"> ```bash yarn add react-native-vision-camera ``` </Tab> <Tab value="bun"> ```bash bun add react-native-vision-camera ``` </Tab> </Tabs>

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

<Tabs items={["npm", "pnpm", "yarn", "bun"]} groupId="package-manager" persist> <Tab value="npm">

bash
npm install react-native-nitro-modules react-native-nitro-image
</Tab> <Tab value="pnpm"> ```bash pnpm add react-native-nitro-modules react-native-nitro-image ``` </Tab> <Tab value="yarn"> ```bash yarn add react-native-nitro-modules react-native-nitro-image ``` </Tab> <Tab value="bun"> ```bash bun add react-native-nitro-modules react-native-nitro-image ``` </Tab> </Tabs>

2. Add permissions

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

<Tabs items={["Expo", "React Native"]} groupId="framework" persist> <Tab value="Expo"> Add Camera (and optionally Microphone) permissions to your Expo config (app.json, app.config.json or app.config.js):

json
{
  // [!code ++:6]
  "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.",
    }
  },
  // [!code ++:3]
  "android": {
    "permissions": ["android.permission.CAMERA", "android.permission.RECORD_AUDIO"]
  }
}
</Tab> <Tab value="React Native"> ##### iOS

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

xml
<dict>
  <!-- ... -->
  // [!code ++]
  <key>NSCameraUsageDescription</key>
  // [!code ++]
  <string>$(PRODUCT_NAME) needs access to your Camera to capture photos and videos.</string>
  // [!code ++]
  <key>NSMicrophoneUsageDescription</key>
  // [!code ++]
  <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:

xml
<manifest xmlns:android="http://schemas.android.com/apk/res/android">
  <!-- ... -->
  // [!code ++]
  <uses-permission android:name="android.permission.CAMERA" />
  // [!code ++]
  <uses-permission android:name="android.permission.RECORD_AUDIO" />
</manifest>
</Tab> </Tabs>

3. Rebuild native

<Tabs items={["Expo", "React Native"]} groupId="framework" persist> <Tab value="Expo"> Then, compile the mods:

bash
npx expo prebuild

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

bash
npx expo run:ios
bash
npx expo run:android
</Tab> <Tab value="React Native">

Then, rebuild Pods:

bash
npx pod-install

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

bash
npm run ios
bash
npm run android
</Tab> </Tabs>

4. Render the <Camera />

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

tsx
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"
    />
  )
}

5. Add outputs

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

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

function App() {
  const { hasPermission, requestPermission } = useCameraPermission()
  // [!code ++]
  const photoOutput = usePhotoOutput()

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

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

See "Camera Outputs" to learn more about outputs.