### 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.