fix: qr scasnner and expo camera

Signed-off-by: Jan <[email protected]>
animo · Dec 16, 2024 · 1b2ff79 · 1b2ff79
1 parent 4d3ff3f
commit 1b2ff79
Show file tree

Hide file tree

Showing 7 changed files with 83 additions and 70 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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<boolean>()
 
   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
         </Heading>
         <Paragraph textAlign="center">
-          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.
         </Paragraph>
         <Button.Text onPress={() => _openAppSetting()}>Open settings</Button.Text>
       </Page>
@@ -54,15 +54,44 @@ export const QrScanner = ({ onScan, onCancel, helpText }: BarcodeScannerProps) =
   return (
     <Page f={1} fd="column" jc="space-between" bg="$black">
       {hasPermission && (
-        <ExpoBarCodeScanner
+        <CameraView
           style={[cameraStyle, StyleSheet.absoluteFill]}
-          onBarCodeScanned={({ data }) => onScan(data)}
+          onBarcodeScanned={({ data }) => onScan(data)}
+          barcodeScannerSettings={{
+            barcodeTypes: ['qr'],
+          }}
         />
       )}
       <YStack zi="$5" ai="center">
         <Heading variant="h1" lineHeight={36} ta="center" dark py="$8" maxWidth="80%">
           Use the camera to scan a QR code
         </Heading>
+        <XStack maxHeight="$10">
+          <AnimatePresence>
+            {helpText && (
+              <XStack
+                key="scan-help-text"
+                enterStyle={{ opacity: 0, scale: 0.5, y: 25 }}
+                exitStyle={{ opacity: 0, scale: 1, y: 25 }}
+                y={0}
+                opacity={1}
+                scale={1}
+                animation="quick"
+                bg="$warning-500"
+                br="$12"
+                px="$3"
+                h="$3"
+                gap="$2"
+                ai="center"
+              >
+                <HeroIcons.ExclamationTriangleFilled size={14} mt="$0.5" color="$grey-800" />
+                <Paragraph variant="sub" fontWeight="$semiBold" color="$grey-800">
+                  {helpText}
+                </Paragraph>
+              </XStack>
+            )}
+          </AnimatePresence>
+        </XStack>
       </YStack>
       <MaskedView
         style={StyleSheet.absoluteFill}
@@ -98,32 +127,6 @@ export const QrScanner = ({ onScan, onCancel, helpText }: BarcodeScannerProps) =
             </Button.Solid>
           </XStack>
         )}
-        {/* TODO move this to the top */}
-        <XStack maxHeight="$10">
-          <AnimatePresence>
-            {helpText && (
-              <XStack
-                key="scan-help-text"
-                enterStyle={{ opacity: 0, scale: 0.5, y: 25 }}
-                exitStyle={{ opacity: 0, scale: 1, y: 25 }}
-                y={0}
-                opacity={1}
-                scale={1}
-                animation="quick"
-                bg="$warning-500"
-                br="$12"
-                px="$4"
-                py="$2"
-                jc="center"
-                ai="center"
-                gap="$2"
-              >
-                <LucideIcons.AlertOctagon size={16} />
-                <Paragraph variant="sub">{helpText}</Paragraph>
-              </XStack>
-            )}
-          </AnimatePresence>
-        </XStack>
         <Spacer />
       </YStack>
     </Page>

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml