### Install react-native-vision-camera with npm
Source: https://mrousavy.com/react-native-vision-camera/docs
Install the react-native-vision-camera library using npm.
```bash
npm install react-native-vision-camera
```
--------------------------------
### Install react-native-vision-camera with bun
Source: https://mrousavy.com/react-native-vision-camera/docs
Install the react-native-vision-camera library using bun.
```bash
bun add react-native-vision-camera
```
--------------------------------
### Install react-native-vision-camera with pnpm
Source: https://mrousavy.com/react-native-vision-camera/docs
Install the react-native-vision-camera library using pnpm.
```bash
pnpm add react-native-vision-camera
```
--------------------------------
### Install react-native-vision-camera with yarn
Source: https://mrousavy.com/react-native-vision-camera/docs
Install the react-native-vision-camera library using yarn.
```bash
yarn add react-native-vision-camera
```
--------------------------------
### Install Pods for iOS
Source: https://mrousavy.com/react-native-vision-camera/docs
After running `npx expo run:ios`, install the necessary CocoaPods dependencies.
```bash
npx pod-install
```
--------------------------------
### Install Nitro Modules and Image dependencies with bun
Source: https://mrousavy.com/react-native-vision-camera/docs
Install the required react-native-nitro-modules and react-native-nitro-image dependencies using bun.
```bash
bun add react-native-nitro-modules react-native-nitro-image
```
--------------------------------
### Render Camera View with Photo Output
Source: https://mrousavy.com/react-native-vision-camera/docs
Render the Camera component and configure it to use `CameraPhotoOutput` for capturing photos. This example also includes permission handling.
```javascript
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 (
)
}
```
--------------------------------
### Install Nitro Modules and Image dependencies with npm
Source: https://mrousavy.com/react-native-vision-camera/docs
Install the required react-native-nitro-modules and react-native-nitro-image dependencies using npm.
```bash
npm install react-native-nitro-modules react-native-nitro-image
```
--------------------------------
### Install Nitro Modules and Image dependencies with yarn
Source: https://mrousavy.com/react-native-vision-camera/docs
Install the required react-native-nitro-modules and react-native-nitro-image dependencies using yarn.
```bash
yarn add react-native-nitro-modules react-native-nitro-image
```
--------------------------------
### Rebuild native dependencies with Expo
Source: https://mrousavy.com/react-native-vision-camera/docs
After installing the library and configuring permissions, rebuild your native dependencies using the Expo CLI.
```bash
npx expo prebuild
```
--------------------------------
### Install Nitro Modules and Image dependencies with pnpm
Source: https://mrousavy.com/react-native-vision-camera/docs
Install the required react-native-nitro-modules and react-native-nitro-image dependencies using pnpm.
```bash
pnpm add react-native-nitro-modules react-native-nitro-image
```
--------------------------------
### Run iOS app with npm
Source: https://mrousavy.com/react-native-vision-camera/docs
Build and run your iOS application using npm after making native changes.
```bash
npm run ios
```
--------------------------------
### Render Camera View and request permission
Source: https://mrousavy.com/react-native-vision-camera/docs
Render the Camera component and request camera permission using the `useCameraPermission` hook. Ensure permission is requested when not already granted.
```javascript
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 (
)
}
```
--------------------------------
### Run iOS app with Expo
Source: https://mrousavy.com/react-native-vision-camera/docs
Build and run your iOS application after making native changes using the Expo CLI.
```bash
npx expo run:ios
```
--------------------------------
### Add Camera and Microphone permissions to iOS Info.plist
Source: https://mrousavy.com/react-native-vision-camera/docs
Manually add Camera and Microphone usage descriptions to your iOS app's Info.plist file.
```xml
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.
```
--------------------------------
### Add Camera and Microphone permissions to Android Manifest
Source: https://mrousavy.com/react-native-vision-camera/docs
Declare Camera and Microphone permissions in your Android app's main AndroidManifest.xml file.
```xml
```
--------------------------------
### Add Camera and Microphone permissions to Expo config
Source: https://mrousavy.com/react-native-vision-camera/docs
Configure Camera and Microphone permissions in your Expo app's configuration file (app.json, app.config.json, or app.config.js).
```json
{
"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"]
}
}
```
=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.