react-native-vision-camera/docs/docs/SETUP.md

id	title	sidebar_label	slug
setup	Getting Started	Getting Started	/

Installing the library

Install react-native-vision-camera through npm:

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

Updating manifests

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

iOS

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

<key>NSCameraUsageDescription</key>
<string>$(PRODUCT_NAME) needs access to your Camera to record videos and capture photos.</string>
<key>NSMicrophoneUsageDescription</key>
<string>$(PRODUCT_NAME) needs access to your Microphone to record videos with audio.</string>

Compatibility

VisionCamera is written in Swift. If your project is written in Objective-C, you have to create a Bridging Header first:

1. Open your project (.xcworkspace) in Xcode
2. Press File > New > File (⌘+N)
3. Select Swift File and press Next
4. Choose whatever name you want, e.g. File.swift and press Create
5. Press Create Bridging Header when promted.

Also, make sure you're using Swift 5.2 or above:

1. Open project.pbxproj in a Text Editor
2. If the LIBRARY_SEARCH_PATH value is set, make sure there is no explicit reference to Swift-5.0. If there is, remove it. See this StackOverflow answer.
3. If the SWIFT_VERSION value is set, make sure it is set to 5.2 or higher.

See Troubleshooting if you're having problems

Android

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

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

Permissions

VisionCamera also provides functions to easily get and request Microphone and Camera permissions.

Getting Permissions

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

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

A permission status can have the following values:

• authorized: Your app is authorized to use said permission. Continue with mounting the <Camera> view.
• not-determined: Your app has not yet requested permission from the user. Continue by calling the request functions.
• 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 to redirect the user to the Settings App where he can manually grant the permission.
• restricted: (iOS only) 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.

:::caution Note: You can only use request functions if the current permission status is not-determined. :::

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

The permission request status can have the following values:

• authorized: Your app is authorized to use said permission. Continue with mounting the <Camera> view.
• 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 to redirect the user to the Settings App where he can manually grant the permission.

🎉 Hooray! You're ready to learn about Camera Devices!