Skip to main content

Getting Started

Installing the library

Install react-native-vision-camera through npm:

npm i react-native-vision-camera
cd ios && pod install

VisionCamera requires iOS 12 or higher, and Android-SDK version 21 or higher. See Troubleshooting if you're having installation issues.

Updating manifests

To use the 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.</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:

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

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

Getting/Requesting Permissions

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

Simply use the useCameraPermission or useMicrophonePermission hook:

const { hasPermission, requestPermission } = useCameraPermission()

And if you want to use the microphone:

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.
  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 to open the App Settings.

Use the <Camera> view

If your app has permission to use the Camera and Microphone, simply use the useCameraDevice(...) hook to get a Camera device (see Camera Devices) and mount the <Camera> view:

function App() {
const device = useCameraDevice('back')
const { hasPermission } = useCameraPermission()

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

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