import React, { useState, useEffect, useRef } from 'react';
import { View, Text, Modal, TouchableOpacity, Vibration, StyleSheet, useWindowDimensions } from 'react-native';
import { SafeAreaView } from 'react-native-safe-area-context';
import { CameraView, useCameraPermissions } from 'expo-camera';
import { X, ScanLine } from 'lucide-react-native';
interface QrScanModalProps {
visible: boolean;
onClose: () => void;
onScan: (data: string) => void;
}
export default function QrScanModal({ visible, onClose, onScan }: QrScanModalProps) {
const [permission, requestPermission] = useCameraPermissions();
const [scanned, setScanned] = useState(false);
const scanInProgress = useRef(false);
const { width, height } = useWindowDimensions();
const squareSize = Math.min(width * 0.8, height * 0.8, 400);
// Permission handling and scanned state reset on modal open
useEffect(() => {
if (!visible) return;
setScanned(false);
scanInProgress.current = false;
if (permission && !permission.granted && permission.canAskAgain) {
requestPermission();
}
}, [visible, permission]);
const handleBarCodeScanned = ({ type, data }: { type: string; data: string }) => {
if (scanInProgress.current) return;
scanInProgress.current = true;
setScanned(true);
Vibration.vibrate();
console.log(`Bar code with type ${type} and data ${data} has been scanned!`);
onScan(data);
onClose();
};
if (!permission) {
return ;
}
return (
{/* Camera Full Screen */}
{/* Mask Overlay with transparent cutout */}
{/* Scanner Target Frame */}
{!scanned && }
{/* UI Overlay */}
{/* Header */}
Scansiona QR Code
Inquadra il codice nel riquadro
{/* Footer */}
Chiudi
);
}