diff --git a/apps/easypid/app.config.js b/apps/easypid/app.config.js index fea3fb7d..f72c7042 100644 --- a/apps/easypid/app.config.js +++ b/apps/easypid/app.config.js @@ -99,6 +99,12 @@ const config = { }, ], 'expo-router', + [ + 'expo-camera', + { + cameraPermission: 'Allow $(PRODUCT_NAME) to access your camera.', + }, + ], ], assetBundlePatterns: ['**/*'], ios: { diff --git a/apps/easypid/package.json b/apps/easypid/package.json index dcda2ae6..63a924b7 100644 --- a/apps/easypid/package.json +++ b/apps/easypid/package.json @@ -34,8 +34,8 @@ "babel-plugin-module-resolver": "^4.1.0", "burnt": "^0.12.2", "expo": "~51.0.39", - "expo-barcode-scanner": "~13.0.1", "expo-blur": "^13.0.2", + "expo-camera": "~16.0.9", "expo-constants": "~16.0.2", "expo-dev-client": "~4.0.16", "expo-device": "~6.0.2", diff --git a/apps/paradym/package.json b/apps/paradym/package.json index 680ec4a4..ffbb7e36 100644 --- a/apps/paradym/package.json +++ b/apps/paradym/package.json @@ -24,7 +24,7 @@ "babel-plugin-module-resolver": "^4.1.0", "burnt": "^0.12.2", "expo": "~51.0.39", - "expo-barcode-scanner": "~13.0.1", + "expo-camera": "~16.0.9", "expo-constants": "~16.0.2", "expo-dev-client": "~4.0.16", "expo-font": "~12.0.7", diff --git a/apps/storybook/package.json b/apps/storybook/package.json index e81218b4..622b99b9 100644 --- a/apps/storybook/package.json +++ b/apps/storybook/package.json @@ -21,7 +21,7 @@ "@storybook/addons": "^7.6.17", "burnt": "^0.12.2", "expo": "~51.0.39", - "expo-barcode-scanner": "~13.0.1", + "expo-camera": "~16.0.9", "expo-constants": "~16.0.2", "expo-dev-client": "~4.0.16", "expo-font": "~12.0.7", diff --git a/packages/scanner/package.json b/packages/scanner/package.json index 8f111f7b..1b59673b 100644 --- a/packages/scanner/package.json +++ b/packages/scanner/package.json @@ -9,12 +9,12 @@ "devDependencies": { "@react-native-masked-view/masked-view": "0.3.1", "@types/react": "~18.2.79", - "expo-barcode-scanner": "~13.0.1", + "expo-camera": "~16.0.9", "react-native": "catalog:" }, "peerDependencies": { "@react-native-masked-view/masked-view": "0.3.1", - "expo-barcode-scanner": "~13.0.1", + "expo-camera": "~16.0.9", "react-native": "catalog:" } } diff --git a/packages/scanner/src/Scanner.tsx b/packages/scanner/src/Scanner.tsx index e33ad6ad..f8ef0b93 100644 --- a/packages/scanner/src/Scanner.tsx +++ b/packages/scanner/src/Scanner.tsx @@ -1,8 +1,8 @@ import type { StyleProp, ViewStyle } from 'react-native' -import { AnimatePresence, Button, Heading, LucideIcons, Page, Paragraph, Spacer, XStack, YStack } from '@package/ui' +import { AnimatePresence, Button, Heading, HeroIcons, Page, Paragraph, Spacer, XStack, YStack } from '@package/ui' import MaskedView from '@react-native-masked-view/masked-view' -import { BarCodeScanner as ExpoBarCodeScanner } from 'expo-barcode-scanner' +import { Camera, CameraView } from 'expo-camera' import { useCallback, useEffect, useState } from 'react' import { Dimensions, Linking, Platform, StyleSheet } from 'react-native' @@ -16,12 +16,12 @@ export const QrScanner = ({ onScan, onCancel, helpText }: BarcodeScannerProps) = const [hasPermission, setHasPermission] = useState() useEffect(() => { - const getBarCodeScannerPermissions = async () => { - const { status } = await ExpoBarCodeScanner.requestPermissionsAsync() + const getCameraPermissions = async () => { + const { status } = await Camera.requestCameraPermissionsAsync() setHasPermission(status === 'granted') } - void getBarCodeScannerPermissions() + void getCameraPermissions() }, []) const _openAppSetting = useCallback(() => { @@ -44,7 +44,7 @@ export const QrScanner = ({ onScan, onCancel, helpText }: BarcodeScannerProps) = Please allow camera access - This allows Paradym to scan QR codes that include credentials or data requests. + This allows the app to scan QR codes that include credentials or data requests. _openAppSetting()}>Open settings @@ -54,15 +54,44 @@ export const QrScanner = ({ onScan, onCancel, helpText }: BarcodeScannerProps) = return ( {hasPermission && ( - onScan(data)} + onBarcodeScanned={({ data }) => onScan(data)} + barcodeScannerSettings={{ + barcodeTypes: ['qr'], + }} /> )} Use the camera to scan a QR code + + + {helpText && ( + + + + {helpText} + + + )} + + )} - {/* TODO move this to the top */} - - - {helpText && ( - - - {helpText} - - )} - - diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index c8439302..89c31a15 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -162,12 +162,12 @@ importers: expo: specifier: ~51.0.39 version: 51.0.39(@babel/core@7.26.0)(@babel/preset-env@7.26.0(@babel/core@7.26.0)) - expo-barcode-scanner: - specifier: ~13.0.1 - version: 13.0.1(expo@51.0.39(@babel/core@7.26.0)(@babel/preset-env@7.26.0(@babel/core@7.26.0))) expo-blur: specifier: ^13.0.2 version: 13.0.2(expo@51.0.39(@babel/core@7.26.0)(@babel/preset-env@7.26.0(@babel/core@7.26.0))) + expo-camera: + specifier: ~16.0.9 + version: 16.0.9(expo@51.0.39(@babel/core@7.26.0)(@babel/preset-env@7.26.0(@babel/core@7.26.0)))(react-native-web@0.19.13(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-native@0.74.5(@babel/core@7.26.0)(@babel/preset-env@7.26.0(@babel/core@7.26.0))(@types/react@18.2.79)(react@18.3.1))(react@18.3.1) expo-constants: specifier: ~16.0.2 version: 16.0.2(expo@51.0.39(@babel/core@7.26.0)(@babel/preset-env@7.26.0(@babel/core@7.26.0))) @@ -325,9 +325,9 @@ importers: expo: specifier: ~51.0.39 version: 51.0.39(@babel/core@7.26.0)(@babel/preset-env@7.26.0(@babel/core@7.26.0)) - expo-barcode-scanner: - specifier: ~13.0.1 - version: 13.0.1(expo@51.0.39(@babel/core@7.26.0)(@babel/preset-env@7.26.0(@babel/core@7.26.0))) + expo-camera: + specifier: ~16.0.9 + version: 16.0.9(expo@51.0.39(@babel/core@7.26.0)(@babel/preset-env@7.26.0(@babel/core@7.26.0)))(react-native-web@0.19.13(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-native@0.74.5(@babel/core@7.26.0)(@babel/preset-env@7.26.0(@babel/core@7.26.0))(@types/react@18.2.79)(react@18.3.1))(react@18.3.1) expo-constants: specifier: ~16.0.2 version: 16.0.2(expo@51.0.39(@babel/core@7.26.0)(@babel/preset-env@7.26.0(@babel/core@7.26.0))) @@ -440,9 +440,9 @@ importers: expo: specifier: ~51.0.39 version: 51.0.39(@babel/core@7.26.0)(@babel/preset-env@7.26.0(@babel/core@7.26.0)) - expo-barcode-scanner: - specifier: ~13.0.1 - version: 13.0.1(expo@51.0.39(@babel/core@7.26.0)(@babel/preset-env@7.26.0(@babel/core@7.26.0))) + expo-camera: + specifier: ~16.0.9 + version: 16.0.9(expo@51.0.39(@babel/core@7.26.0)(@babel/preset-env@7.26.0(@babel/core@7.26.0)))(react-native-web@0.19.13(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-native@0.74.5(@babel/core@7.26.0)(@babel/preset-env@7.26.0(@babel/core@7.26.0))(@types/react@18.2.79)(react@18.3.1))(react@18.3.1) expo-constants: specifier: ~16.0.2 version: 16.0.2(expo@51.0.39(@babel/core@7.26.0)(@babel/preset-env@7.26.0(@babel/core@7.26.0))) @@ -747,9 +747,9 @@ importers: '@types/react': specifier: ~18.2.79 version: 18.2.79 - expo-barcode-scanner: - specifier: ~13.0.1 - version: 13.0.1(expo@51.0.39(@babel/core@7.26.0)(@babel/preset-env@7.26.0(@babel/core@7.26.0))) + expo-camera: + specifier: ~16.0.9 + version: 16.0.9(expo@51.0.39(@babel/core@7.26.0)(@babel/preset-env@7.26.0(@babel/core@7.26.0)))(react-native-web@0.19.13(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-native@0.74.5(@babel/core@7.26.0)(@babel/preset-env@7.26.0(@babel/core@7.26.0))(@types/react@18.2.79)(react@18.3.1))(react@18.3.1) react-native: specifier: 'catalog:' version: 0.74.5(@babel/core@7.26.0)(@babel/preset-env@7.26.0(@babel/core@7.26.0))(@types/react@18.2.79)(react@18.3.1) @@ -5980,11 +5980,6 @@ packages: peerDependencies: expo: '*' - expo-barcode-scanner@13.0.1: - resolution: {integrity: sha512-xBGLT1An2gpAMIQRTLU3oHydKohX8r8F9/ait1Fk9Vgd0GraFZbP4IiT7nHMlaw4H6E7Muucf7vXpGV6u7d4HQ==} - peerDependencies: - expo: '*' - expo-blur@13.0.2: resolution: {integrity: sha512-t2p7BChO3Reykued++QJRMZ/og6J3aXtSQ+bU31YcBeXhZLkHwjWEhiPKPnJka7J2/yTs4+jOCNDY0kCZmcE3w==} peerDependencies: @@ -5995,6 +5990,17 @@ packages: peerDependencies: expo: '*' + expo-camera@16.0.9: + resolution: {integrity: sha512-zyjnv1UfSBU/FFqozAI4yWHjEun4Ex2tkN45TcdNWYb26xU+Ab+is7CLEk3bau/awP7W/xBgSpkI+Lz86hmBqQ==} + peerDependencies: + expo: '*' + react: '*' + react-native: '*' + react-native-web: '*' + peerDependenciesMeta: + react-native-web: + optional: true + expo-constants@16.0.2: resolution: {integrity: sha512-9tNY3OVO0jfiMzl7ngb6IOyR5VFzNoN5OOazUWoeGfmMqVB5kltTemRvKraK9JRbBKIw+SOYLEmF0sEqgFZ6OQ==} peerDependencies: @@ -6043,11 +6049,6 @@ packages: peerDependencies: expo: '*' - expo-image-loader@4.7.0: - resolution: {integrity: sha512-cx+MxxsAMGl9AiWnQUzrkJMJH4eNOGlu7XkLGnAXSJrRoIiciGaKqzeaD326IyCTV+Z1fXvIliSgNW+DscvD8g==} - peerDependencies: - expo: '*' - expo-image@1.13.0: resolution: {integrity: sha512-0NLDcFmEn4Nh1sXeRvNzDHT+Fl6FXtTol6ki6kYYH0/iDeSFWyIy/Fek6kzDDYAmhipSMR7buPf7VVoHseTbAA==} peerDependencies: @@ -9119,12 +9120,15 @@ packages: sudo-prompt@8.2.5: resolution: {integrity: sha512-rlBo3HU/1zAJUrkY6jNxDOC9eVYliG6nS4JA8u8KAshITd07tafMc/Br7xQwCSseXwJ2iCcHCE8SNWX3q8Z+kw==} + deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info. sudo-prompt@9.1.1: resolution: {integrity: sha512-es33J1g2HjMpyAhz8lOR+ICmXXAqTuKbuXuUWLhOLew20oN9oUCgCJx615U/v7aioZg7IX5lIh9x34vwneu4pA==} + deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info. sudo-prompt@9.2.1: resolution: {integrity: sha512-Mu7R0g4ig9TUuGSxJavny5Rv0egCEtpZRNMrZaYS1vxkiIxGiGUwoezU3LazIQ+KE04hTrTfNPgxU5gzi7F5Pw==} + deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info. supports-color@5.5.0: resolution: {integrity: sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==} @@ -17562,11 +17566,6 @@ snapshots: transitivePeerDependencies: - supports-color - expo-barcode-scanner@13.0.1(expo@51.0.39(@babel/core@7.26.0)(@babel/preset-env@7.26.0(@babel/core@7.26.0))): - dependencies: - expo: 51.0.39(@babel/core@7.26.0)(@babel/preset-env@7.26.0(@babel/core@7.26.0)) - expo-image-loader: 4.7.0(expo@51.0.39(@babel/core@7.26.0)(@babel/preset-env@7.26.0(@babel/core@7.26.0))) - expo-blur@13.0.2(expo@51.0.39(@babel/core@7.26.0)(@babel/preset-env@7.26.0(@babel/core@7.26.0))): dependencies: expo: 51.0.39(@babel/core@7.26.0)(@babel/preset-env@7.26.0(@babel/core@7.26.0)) @@ -17577,6 +17576,15 @@ snapshots: expo: 51.0.39(@babel/core@7.26.0)(@babel/preset-env@7.26.0(@babel/core@7.26.0)) semver: 7.6.3 + expo-camera@16.0.9(expo@51.0.39(@babel/core@7.26.0)(@babel/preset-env@7.26.0(@babel/core@7.26.0)))(react-native-web@0.19.13(react-dom@18.3.1(react@18.3.1))(react@18.3.1))(react-native@0.74.5(@babel/core@7.26.0)(@babel/preset-env@7.26.0(@babel/core@7.26.0))(@types/react@18.2.79)(react@18.3.1))(react@18.3.1): + dependencies: + expo: 51.0.39(@babel/core@7.26.0)(@babel/preset-env@7.26.0(@babel/core@7.26.0)) + invariant: 2.2.4 + react: 18.3.1 + react-native: 0.74.5(@babel/core@7.26.0)(@babel/preset-env@7.26.0(@babel/core@7.26.0))(@types/react@18.2.79)(react@18.3.1) + optionalDependencies: + react-native-web: 0.19.13(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + expo-constants@16.0.2(expo@51.0.39(@babel/core@7.26.0)(@babel/preset-env@7.26.0(@babel/core@7.26.0))): dependencies: '@expo/config': 9.0.4 @@ -17637,10 +17645,6 @@ snapshots: dependencies: expo: 51.0.39(@babel/core@7.26.0)(@babel/preset-env@7.26.0(@babel/core@7.26.0)) - expo-image-loader@4.7.0(expo@51.0.39(@babel/core@7.26.0)(@babel/preset-env@7.26.0(@babel/core@7.26.0))): - dependencies: - expo: 51.0.39(@babel/core@7.26.0)(@babel/preset-env@7.26.0(@babel/core@7.26.0)) - expo-image@1.13.0(expo@51.0.39(@babel/core@7.26.0)(@babel/preset-env@7.26.0(@babel/core@7.26.0))): dependencies: expo: 51.0.39(@babel/core@7.26.0)(@babel/preset-env@7.26.0(@babel/core@7.26.0))