crazycharge-app/app/(public)/test.tsx

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';

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>
    );
}

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)'
    }
});