import React, { useState, useEffect } from 'react';
import { View, Text, Modal, TouchableOpacity, Vibration, StyleSheet, Dimensions } 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 { width, height } = Dimensions.get('window');
const squareSize = Math.min(width * 0.8, height * 0.8, 400);
// Permission Handling and Reset Scanned State on Modal Open
useEffect(() => {
if (visible) {
setScanned(false);
if (permission && !permission.granted && permission.canAskAgain) {
requestPermission();
}
}
}, [visible, permission]);
const handleBarCodeScanned = ({ type, data }: { type: string; data: string }) => {
if (scanned) return;
setScanned(true);
Vibration.vibrate();
console.log(`Bar code with type ${type} and data ${data} has been scanned!`);
onScan(data);
onClose();
};
if (!permission) {
return ;
}
if (!permission.granted && visible) {
requestPermission();
}
return (
{/* Camera Full Screen */}
{/* Dark Overlay with Transparent "Hole" (Visually Simulated with Borders or Opacity) */}
{/* Header Overlay */}
Scansiona QR Code
Inquadra il codice nel riquadro
{/* Central Area (Transparent for the camera) */}
{/* Decorative Corners */}
{/* Animated Scan Line or Icon */}
{!scanned && }
{/* Footer Overlay */}
Chiudi
);
}