modify camera permission alert

app/(auth)/(tabs)/(home)/scanQrPage.tsx

@@ -1,7 +1,6 @@
 import { CameraView, useCameraPermissions } from 'expo-camera';
-import { useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import {
-    Button,
     Dimensions,
     Pressable,
     ScrollView,
@@ -20,21 +19,32 @@ const ScanQrPage = () => {
     const [permission, requestPermission] = useCameraPermissions();
     const [scanned, setScanned] = useState(false);
     const viewRef = useRef(null);
+
+    useEffect(() => {
+        (async () => {
+            const { status } = await requestPermission();
+            if (status !== 'granted') {
+                alert('Please grant camera permission to use the QR scanner');
+            }
+        })();
+    }, []);
+
     if (!permission) {
         return <View />;
     }
 
     if (!permission.granted) {
         return (
-            // <View style={styles.container}>
-            <View className="flex-1 items-center justify-center">
+            <View className="flex-1 justify-center items-center">
                 <Text style={{ textAlign: 'center' }}>
-                    We need your permission to show the camera
+                    We need your permission to access the camera QR code
+                    function. Please go to your device settings and enable
+                    camera permissions for this application.
                 </Text>
-                <Button onPress={requestPermission} title="grant permission" />
             </View>
         );
     }
+
     const { width: screenWidth, height: screenHeight } =
         Dimensions.get('window');
 

app/(public)/test.tsx

@@ -1,237 +1,9 @@
-import { CameraView, useCameraPermissions } from 'expo-camera';
-import { useRef, useState } from 'react';
-import {
-    Button,
-    Dimensions,
-    Pressable,
-    ScrollView,
-    StyleSheet,
-    Text,
-    View
-} from 'react-native';
-import ChooseCarForChargingRow from '../../component/global/chooseCarForChargingRow';
-import { SafeAreaView } from 'react-native-safe-area-context';
-import { CrossLogoWhiteSvg, QuestionSvg } from '../../component/global/SVG';
-import { router } from 'expo-router';
+import { StyleSheet, Text, View } from 'react-native';
 
 export default function Test() {
-    const [permission, requestPermission] = useCameraPermissions();
-    const [scanned, setScanned] = useState(false);
-    const viewRef = useRef(null);
-    if (!permission) {
-        return <View />;
-    }
-
-    if (!permission.granted) {
-        return (
-            <View style={styles.container}>
-                <Text style={{ textAlign: 'center' }}>
-                    We need your permission to show the camera
-                </Text>
-                <Button onPress={requestPermission} title="grant permission" />
-            </View>
-        );
-    }
-    const { width: screenWidth, height: screenHeight } =
-        Dimensions.get('window');
-
-    const handleBarCodeScanned = ({ bounds, data, type }) => {
-        const { origin, size } = bounds;
-
-        // Calculate the size of the square transparent area
-        const transparentAreaSize = Math.min(
-            screenWidth * 0.6,
-            screenHeight * 0.3
-        );
-        const transparentAreaX = (screenWidth - transparentAreaSize) / 2;
-        const transparentAreaY = (screenHeight - transparentAreaSize) / 2;
-
-        // Check if the barcode is within the transparent area
-        if (
-            origin.x >= transparentAreaX &&
-            origin.y >= transparentAreaY &&
-            origin.x + size.width <= transparentAreaX + transparentAreaSize &&
-            origin.y + size.height <= transparentAreaY + transparentAreaSize
-        ) {
-            setScanned(true);
-            console.log(` type: ${type}            data: ${data} `);
-            if (type === 'qr') {
-                console.log('QR Code link:', data);
-            }
-            setTimeout(() => {
-                setScanned(false);
-            }, 5000);
-        }
-    };
-
-    const dummyDataChooseCarForCharging = [
-        {
-            imageUrl: require('../../assets/car1.png'),
-            VehicleName: 'TESLA - Model 3',
-            isDefault: true
-        },
-        { VehicleName: 'TESLA - Model Y', isDefault: false },
-        {
-            imageUrl: require('../../assets/car1.png'),
-            VehicleName: 'TESLA - Model X',
-            isDefault: false
-        },
-        { VehicleName: 'TESLA - Model 3', isDefault: false }
-    ];
-
-    const ChooseCar = () => {
-        const isLargeScreen = screenHeight >= 800;
-
-        return (
-            <View
-                style={{
-                    ...(isLargeScreen
-                        ? {
-                              marginTop: '10%',
-                              marginBottom: '12%',
-                              paddingBottom: 12,
-                              backgroundColor: 'rgba(0,0,0,0.7)'
-                          }
-                        : {
-                              marginVertical: '5%',
-                              paddingBottom: 12,
-                              backgroundColor: 'rgba(0,0,0,0.7)'
-                          })
-                }}
-            >
-                <View className="mx-[5%] items-center">
-                    <View className="flex-row items-center justify-between  w-full">
-                        <View className="pt-2">
-                            <Pressable
-                                onPress={() => {
-                                    if (router.canGoBack()) {
-                                        router.back();
-                                    } else {
-                                        router.replace('mainPage');
-                                    }
-                                }}
-                            >
-                                <CrossLogoWhiteSvg />
-                            </Pressable>
-                        </View>
-                        <Text className="text-base text-white pt-2">
-                            選擇充電車輛
-                        </Text>
-                        <Text className="text-xl text-white pt-2"></Text>
-                    </View>
-
-                    <ScrollView
-                        horizontal={true}
-                        showsHorizontalScrollIndicator={false}
-                        contentContainerStyle={{
-                            alignItems: 'center',
-                            flexDirection: 'row',
-                            marginVertical: 8
-                        }}
-                        className="space-x-2"
-                    >
-                        {dummyDataChooseCarForCharging.map((car, index) => (
-                            <ChooseCarForChargingRow
-                                imageUrl={car.imageUrl}
-                                key={`${car.VehicleName}+${index}`}
-                                VehicleName={car.VehicleName}
-                                isDefault={car.isDefault}
-                            />
-                        ))}
-                    </ScrollView>
-                </View>
-            </View>
-        );
-    };
-
     return (
-        <SafeAreaView className="flex-1" edges={['top', 'right', 'left']}>
-            <View style={styles.container} ref={viewRef}>
-                <CameraView
-                    style={styles.camera}
-                    facing="back"
-                    barcodeScannerSettings={{
-                        barcodeTypes: ['qr']
-                    }}
-                    onBarcodeScanned={
-                        scanned ? undefined : handleBarCodeScanned
-                    }
-                    responsiveOrientationWhenOrientationLocked={true}
-                >
-                    <View style={styles.overlay}>
-                        <View style={styles.topOverlay}>
-                            <ChooseCar />
-                        </View>
-                        <View style={styles.centerRow}>
-                            <View style={styles.leftOverlay}></View>
-                            <View style={styles.transparentArea}></View>
-                            <View style={styles.rightOverlay} />
-                        </View>
-                        <View
-                            className="items-center justify-between"
-                            style={styles.bottomOverlay}
-                        >
-                            <View>
-                                <Text className="text-white text-lg font-bold mt-2 ">
-                                    請掃瞄充電座上的二維碼
-                                </Text>
-                            </View>
-                            <View className="flex-row space-x-2 items-center ">
-                                <QuestionSvg />
-
-                                <Pressable
-                                    onPress={() => console.log('需要協助?')}
-                                >
-                                    <Text className="text-white text-base">
-                                        需要協助?
-                                    </Text>
-                                </Pressable>
-                            </View>
-                            <View />
-                        </View>
-                    </View>
-                </CameraView>
-            </View>
-        </SafeAreaView>
+        <View className="flex-1 items-center justify-center">
+            <Text>Test</Text>
+        </View>
     );
 }
-
-const styles = StyleSheet.create({
-    container: {
-        flex: 1
-    },
-
-    camera: {
-        flex: 1
-    },
-    overlay: {
-        flex: 1
-    },
-    topOverlay: {
-        flex: 35,
-        alignItems: 'center',
-        backgroundColor: 'rgba(0,0,0,0.5)'
-    },
-    centerRow: {
-        flex: 30,
-        flexDirection: 'row'
-    },
-    leftOverlay: {
-        flex: 20,
-        backgroundColor: 'rgba(0,0,0,0.5)'
-    },
-    transparentArea: {
-        flex: 60,
-        aspectRatio: 1,
-        position: 'relative'
-    },
-
-    rightOverlay: {
-        flex: 20,
-        backgroundColor: 'rgba(0,0,0,0.5)'
-    },
-    bottomOverlay: {
-        flex: 35,
-        backgroundColor: 'rgba(0,0,0,0.5)'
-    }
-});