react-native-vision-camera/docs/docs/guides/SETUP.mdx

---
id: setup
title: Getting Started
sidebar_label: Getting Started
slug: /guides
---

import Tabs from '@theme/Tabs'
import TabItem from '@theme/TabItem'
import useBaseUrl from '@docusaurus/useBaseUrl'

<div class="image-container">
  <img width="283" src={useBaseUrl("img/example_intro.png")} />
</div>

## Installing the library

Install [react-native-vision-camera](https://www.npmjs.com/package/react-native-vision-camera) through npm:

<Tabs
  groupId="environment"
  defaultValue="rn"
  values={[
    {label: 'React Native', value: 'rn'},
    {label: 'Expo', value: 'expo'}
  ]}>
<TabItem value="rn">

```bash
npm i react-native-vision-camera
npx pod-install
```

</TabItem>

<TabItem value="expo">

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

</TabItem>
</Tabs>

VisionCamera requires **iOS 12 or higher**, and **Android-SDK version 26 or higher**. See [Troubleshooting](/docs/guides/troubleshooting) if you're having installation issues.

> **(Optional)** If you want to use [Frame Processors](/docs/guides/frame-processors), you need to install [react-native-worklets-core](https://github.com/margelo/react-native-worklets-core) 0.2.0 or higher.

## Updating manifests

To use the Camera or Microphone you must first specify that your app requires camera and microphone permissions.

<Tabs
  groupId="environment"
  defaultValue="rn"
  values={[
    {label: 'React Native', value: 'rn'},
    {label: 'Expo', value: 'expo'}
  ]}>
<TabItem value="rn">

### iOS

Open your project's `Info.plist` and add the following lines inside the outermost `<dict>` tag:

```xml
<key>NSCameraUsageDescription</key>
<string>$(PRODUCT_NAME) needs access to your Camera.</string>

<!-- optionally, if you want to record audio: -->
<key>NSMicrophoneUsageDescription</key>
<string>$(PRODUCT_NAME) needs access to your Microphone.</string>
```

### Android

Open your project's `AndroidManifest.xml` and add the following lines inside the `<manifest>` tag:

```xml
<uses-permission android:name="android.permission.CAMERA" />

<!-- optionally, if you want to record audio: -->
<uses-permission android:name="android.permission.RECORD_AUDIO" />
```

</TabItem>
<TabItem value="expo">

### Managed Expo

Add the VisionCamera plugin to your Expo config (`app.json`, `app.config.json` or `app.config.js`):

```json
{
  "name": "my app",
  "plugins": [
    [
      "react-native-vision-camera",
      {
        "cameraPermissionText": "$(PRODUCT_NAME) needs access to your Camera.",

        // optionally, if you want to record audio:
        "enableMicrophonePermission": true,
        "microphonePermissionText": "$(PRODUCT_NAME) needs access to your Microphone."
      }
    ]
  ]
}
```

Finally, compile the mods:

```bash
expo prebuild
```

To apply the changes, build a new binary with EAS:

```bash
eas build
```

</TabItem>
</Tabs>

## Getting/Requesting Permissions

Next, ask the user for Camera or Microphone permissions using the Permissions API:


<Tabs
  groupId="component-style"
  defaultValue="hooks"
  values={[
    {label: 'Hooks API', value: 'hooks'},
    {label: 'Imperative API', value: 'imperative'}
  ]}>
<TabItem value="hooks">

Simply use the `useCameraPermission` or `useMicrophonePermission` hook:

```ts
const { hasPermission, requestPermission } = useCameraPermission()
```

And if you want to use the microphone:

```ts
const { hasPermission, requestPermission } = useMicrophonePermission()
```

There could be three states to this:

1. First time opening the app, `hasPermission` is false. Call `requestPermission()` now.
2. User already granted permission, `hasPermission` is true. Continue with [using the `<Camera>` view](#use-the-camera-view).
3. User explicitly denied permission, `hasPermission` is false and `requestPermission()` will return false. Tell the user that he needs to grant Camera Permission, potentially by using the [`Linking` API](https://reactnative.dev/docs/linking#opensettings) to open the App Settings.

</TabItem>
<TabItem value="imperative">


### Getting Permissions

Simply use the **get** functions to find out if a user has granted or denied permission before:

```ts
const cameraPermission = await Camera.getCameraPermissionStatus()
const microphonePermission = await Camera.getMicrophonePermissionStatus()
```

A permission status can have the following values:

* `granted`: Your app is authorized to use said permission. Continue with [using the `<Camera>` view](#use-the-camera-view).
* `not-determined`: Your app has not yet requested permission from the user. [Continue by calling the **request** functions.](#requesting-permissions)
* `denied`: Your app has already requested permissions from the user, but was explicitly denied. You cannot use the **request** functions again, but you can use the [`Linking` API](https://reactnative.dev/docs/linking#opensettings) to redirect the user to the Settings App where he can manually grant the permission.
* `restricted`: Your app cannot use the Camera or Microphone because that functionality has been restricted, possibly due to active restrictions such as parental controls being in place.

### Requesting Permissions

Use the **request** functions to prompt the user to give your app permission to use the Camera or Microphone.

:::note
The **request** functions only have effect if the current permission status is `not-determined`.
:::

```ts
const newCameraPermission = await Camera.requestCameraPermission()
const newMicrophonePermission = await Camera.requestMicrophonePermission()
```

The permission request status can have the following values:

* `granted`: Your app is authorized to use said permission. Continue with [using the `<Camera>` view](#use-the-camera-view).
* `denied`: The user explicitly denied the permission request alert. You cannot use the **request** functions again, but you can use the [`Linking` API](https://reactnative.dev/docs/linking#opensettings) to redirect the user to the Settings App where he can manually grant the permission.
* `restricted`: Your app cannot use the Camera or Microphone because that functionality has been restricted, possibly due to active restrictions such as parental controls being in place.

</TabItem>
</Tabs>

## Use the `<Camera>` view

If your app has permission to use the Camera and Microphone, simply use the [`useCameraDevice(...)`](/docs/api#usecameradevice) hook to get a Camera device (see [Camera Devices](/docs/guides/devices)) and mount the `<Camera>` view:

```tsx
function App() {
  const device = useCameraDevice('back')

  if (device == null) return <NoCameraDeviceError />
  return (
    <Camera
      style={StyleSheet.absoluteFill}
      device={device}
      isActive={true}
    />
  )
}
```

<br />

#### 🎉 Hooray! You're ready to learn about [Camera Devices](/docs/guides/devices)!