fix: moved qr scanner label (#257)

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

Hide file tree

Showing 10 changed files with 89 additions and 75 deletions.
diff --git a/apps/easypid/app.config.js b/apps/easypid/app.config.js
@@ -73,6 +73,12 @@ const config = {
         },
       },
     ],
+    [
+      'expo-camera',
+      {
+        cameraPermission: 'Allow $(PRODUCT_NAME) to access your camera.',
+      },
+    ],
     [
       'expo-build-properties',
       {

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": "~15.0.16",
 		"expo-constants": "~16.0.2",
 		"expo-dev-client": "~4.0.16",
 		"expo-device": "~6.0.2",

diff --git a/apps/easypid/src/features/wallet/FunkeCredentialDetailAttributesScreen.tsx b/apps/easypid/src/features/wallet/FunkeCredentialDetailAttributesScreen.tsx
@@ -83,11 +83,6 @@ export function FunkeCredentialDetailAttributesScreen({
         <ScrollView ref={scrollViewRef} onScroll={handleScroll} scrollEventThrottle={scrollEventThrottle}>
           <YStack gap="$4" p="$4" marginBottom={bottom}>
             <Heading variant="h1">Card attributes</Heading>
-            <MessageBox
-              icon={<HeroIcons.EyeSlash />}
-              variant="info"
-              message="This overview is only for you. Only share information using a QR code."
-            />
             <CredentialAttributes
               headerStyle="small"
               borderStyle="large"

diff --git a/apps/paradym/app.config.js b/apps/paradym/app.config.js
@@ -70,6 +70,12 @@ const config = {
     [
       'expo-router',
       'expo-font',
+      [
+        'expo-camera',
+        {
+          cameraPermission: 'Allow $(PRODUCT_NAME) to access your camera.',
+        },
+      ],
       {
         fonts: [
           '../../node_modules/@tamagui/font-inter/otf/Inter-Regular.otf',

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": "~15.0.16",
 		"expo-constants": "~16.0.2",
 		"expo-dev-client": "~4.0.16",
 		"expo-font": "~12.0.7",

diff --git a/apps/storybook/app.json b/apps/storybook/app.json
@@ -26,6 +26,12 @@
 				]
 			}
 		],
+		[
+			"expo-camera",
+			{
+				"cameraPermission": "Allow $(PRODUCT_NAME) to access your camera."
+			}
+		],
 		"expo-router"
 	]
 }
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": "~15.0.16",
 		"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,13 @@
 	"devDependencies": {
 		"@react-native-masked-view/masked-view": "0.3.1",
 		"@types/react": "~18.2.79",
-		"expo-barcode-scanner": "~13.0.1",
+		"expo-camera": "~15.0.16",
 		"react-native": "catalog:"
 	},
 	"peerDependencies": {
 		"@react-native-masked-view/masked-view": "0.3.1",
-		"expo-barcode-scanner": "~13.0.1",
+		"expo": "catalog:",
+		"expo-camera": "~15.0.16",
 		"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
-Original file line number
+Diff line change
@@ Expand Up / @@ -73,6 +73,12 @@ const config = { @@
             },
           },
         ],
+        [
+          'expo-camera',
+          {
+            cameraPermission: 'Allow $(PRODUCT_NAME) to access your camera.',
+          },
+        ],
         [
           'expo-build-properties',
           {
@@ Expand Down @@