From d0ca2c0490b819da5a636d0c1f081f158fffd65c Mon Sep 17 00:00:00 2001 From: Frank Calise Date: Mon, 23 Oct 2023 12:47:32 -0400 Subject: [PATCH 1/4] feat(recipes): react-native-vision-camera --- docs/recipes/ReactNativeVisionCamera.md | 413 ++++++++++++++++++++++++ 1 file changed, 413 insertions(+) create mode 100644 docs/recipes/ReactNativeVisionCamera.md diff --git a/docs/recipes/ReactNativeVisionCamera.md b/docs/recipes/ReactNativeVisionCamera.md new file mode 100644 index 00000000..8f3aeb84 --- /dev/null +++ b/docs/recipes/ReactNativeVisionCamera.md @@ -0,0 +1,413 @@ +--- +title: React Native Vision Camera +description: How to integrate VisionCamera in Ignite v9+ +tags: + - Expo + - VisionCamera + - react-native-vision-camera +last_update: + author: Frank Calise +publish_date: 2023-10-23 +--- + +# VisionCamera + +## Overview + +VisionCamera is a powerful, high-performance React Native Camera library. It's both feature-rich and flexible! The library provides the necessary hooks and functions to easily integrate camera functionality in your app. + +In this example, we'll take a look at wiring up a barcode scanner. This tutorial is written for the Ignite v9 Prebuild workflow, however it generally still applies to DIY or even a bare react-native project. + +## Installation + +If you haven't already, spin up a new Ignite application: + +```terminal +npx ignite-cli@next new PizzaApp --remove-demo --workflow=prebuild --yes +cd PizzaApp +``` + +Next, let's install the necessary dependencies. You can see complete installation instructions for `react-native-vision-camera` [here](https://react-native-vision-camera.com/docs/guides). + +```terminal +npx expo install react-native-vision-camera +``` + +Add the plugin to `app.json` as per the documentation. It'll look like the following if you have the default Ignite template: + +```json +"plugins": [ + "expo-localization", + [ + "expo-build-properties", + { + "ios": { + "newArchEnabled": false + }, + "android": { + "newArchEnabled": false + } + } + ], + [ + "react-native-vision-camera", + { + "cameraPermissionText": "$(PRODUCT_NAME) needs access to your Camera.", + "enableCodeScanner": true + } + ] +], +``` + +To get this native dependency working in our project, we'll need to run prebuild so Expo can execute the proper native code changes for us. + +```terminal +npx expo prebuild +``` + +## Permissions + +Before we can get to using the camera on the device, we must get permission from the user to do so. Let's edit the Welcome screen in Ignite to reflect the current permission status and a way to prompt the user. + +```tsx +import { observer } from "mobx-react-lite"; +import React, { FC } from "react"; +import { AppStackScreenProps } from "../navigators"; +import { Camera, CameraPermissionStatus } from "react-native-vision-camera"; +import { Linking, View, ViewStyle } from "react-native"; +import { Button, Screen, Text } from "app/components"; + +interface WelcomeScreenProps extends AppStackScreenProps<"Welcome"> {} + +export const WelcomeScreen: FC = observer( + function WelcomeScreen(_props) { + const [cameraPermission, setCameraPermission] = + React.useState(); + + React.useEffect(() => { + Camera.getCameraPermissionStatus().then(setCameraPermission); + }, []); + + const promptForCameraPermissions = React.useCallback(async () => { + const permission = await Camera.requestCameraPermission(); + Camera.getCameraPermissionStatus().then(setCameraPermission); + + if (permission === "denied") await Linking.openSettings(); + }, [cameraPermission]); + + if (cameraPermission == null) { + // still loading + return null; + } + + return ( + + + + Camera Permission:{" "} + {cameraPermission === null ? "Loading..." : cameraPermission} + + {cameraPermission !== "granted" && ( +