leonardo/mariani_mobile
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: update tab bar icons size, enhance QR scan modal layout, and remove unused icons

Browse Source
This commit is contained in:
leonardo
2026-09-10 17:32:48 +02:00
parent b27a660eef
commit 5a6006e2d2
10 changed files with 74 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/QrScanModal.tsx
+50 -34
View File
@@ -1,5 +1,5 @@
import React, { useState, useEffect, useRef } from 'react';
import { View, Text, Modal, TouchableOpacity, Vibration, StyleSheet, Dimensions } from 'react-native';
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';
@@ -14,17 +14,16 @@ export default function QrScanModal({ visible, onClose, onScan }: QrScanModalPro
const [permission, requestPermission] = useCameraPermissions();
const [scanned, setScanned] = useState(false);
const scanInProgress = useRef(false);
const { width, height } = Dimensions.get('window');
const { width, height } = useWindowDimensions();
const squareSize = Math.min(width * 0.8, height * 0.8, 400);
// Permission Handling and Reset Scanned State on Modal Open
// Permission handling and scanned state reset on modal open
useEffect(() => {
if (visible) {
setScanned(false);
scanInProgress.current = false;
if (permission && !permission.granted && permission.canAskAgain) {
requestPermission();
}
if (!visible) return;
setScanned(false);
scanInProgress.current = false;
if (permission && !permission.granted && permission.canAskAgain) {
requestPermission();
}
}, [visible, permission]);
@@ -43,10 +42,6 @@ export default function QrScanModal({ visible, onClose, onScan }: QrScanModalPro
return <View />;
}
if (!permission.granted && visible) {
requestPermission();
}
return (
<Modal
visible={visible}
@@ -65,35 +60,56 @@ export default function QrScanModal({ visible, onClose, onScan }: QrScanModalPro
}}
/>
{/* Dark Overlay with Transparent "Hole" (Visually Simulated with Borders or Opacity) */}
<SafeAreaView className="flex-1 justify-between bg-black/60 pt-8">
{/* Header Overlay */}
<View className="items-center">
<Text className="text-white text-xl font-bold">Scansiona QR Code</Text>
<Text className="text-gray-300 text-base mt-1">Inquadra il codice nel riquadro</Text>
</View>
{/* Mask Overlay with transparent cutout */}
<View style={StyleSheet.absoluteFillObject} pointerEvents="none">
<View className="flex-1 bg-black/60" />
<View style={{ height: squareSize }} className="flex-row">
<View className="flex-1 bg-black/60" />
{/* Central Area (Transparent for the camera) */}
<View className="items-center justify-center" style={{ height: squareSize }}>
<View style={{ width: squareSize, height: squareSize }}
className="border-2 border-[#099499] bg-transparent relative justify-center items-center">
{/* Decorative Corners */}
{/* Scanner Target Frame */}
<View
style={{ width: squareSize, height: squareSize }}
className="border-2 border-[#099499] justify-center items-center relative"
>
<View className="absolute top-0 left-0 w-6 h-6 border-l-4 border-t-4 border-[#099499]" />
<View className="absolute top-0 right-0 w-6 h-6 border-r-4 border-t-4 border-[#099499]" />
<View className="absolute bottom-0 left-0 w-6 h-6 border-l-4 border-b-4 border-[#099499]" />
<View className="absolute bottom-0 right-0 w-6 h-6 border-r-4 border-b-4 border-[#099499]" />
{/* Animated Scan Line or Icon */}
{!scanned && <ScanLine color="#099499" size={40} className="opacity-50" pointerEvents="none" />}
{!scanned && <ScanLine color="#099499" size={40} className="opacity-50" />}
</View>
</View>
{/* Footer Overlay */}
<View className="items-center justify-end pb-12">
<TouchableOpacity onPress={onClose} className="bg-white/20 p-4 rounded-full">
<X color="white" size={32} pointerEvents="none" />
</TouchableOpacity>
<Text className="text-white mt-4 font-medium">Chiudi</Text>
<View className="flex-1 bg-black/60" />
</View>
<View className="flex-1 bg-black/60" />
</View>
{/* UI Overlay */}
<SafeAreaView style={StyleSheet.absoluteFillObject} pointerEvents="box-none">
<View className="flex-1 justify-between pt-8">
{/* Header */}
<View className="items-center">
<Text className="text-white text-xl font-bold">
Scansiona QR Code
</Text>
<Text className="text-gray-300 text-base mt-1">
Inquadra il codice nel riquadro
</Text>
</View>
{/* Footer */}
<View className="items-center pb-12">
<TouchableOpacity
onPress={onClose}
className="bg-white/20 p-4 rounded-full"
>
<X color="white" size={32} />
</TouchableOpacity>
<Text className="text-white mt-4 font-medium">
Chiudi
</Text>
</View>
</View>
</SafeAreaView>
</View>