Fixed ClearScanData not being called when closing ScannedData Modal

This commit is contained in:
2024-08-15 16:22:13 +08:00
parent 36be49a740
commit 7618532d7a
2 changed files with 37 additions and 26 deletions

View File

@@ -26,6 +26,7 @@ const App: React.FC = () => {
const clearScanData = () => {
setScannedData('');
console.log('ClearScanedDATa');
};
useEffect(() => {

View File

@@ -11,7 +11,7 @@ import NetInfo from '@react-native-community/netinfo';
const { width: screenWidth, height: screenHeight } = Dimensions.get('window');
const QRScannerScreen: React.FC = () => {
const QRScannerScreen: React.FC<{ clearScanData: () => void }> = ({ clearScanData }) => {
// State management
const [isSettingsModalVisible, setIsSettingsModalVisible] = useState<boolean>(false);
const [enableTorch, setEnableTorch] = useState<boolean>(false);
@@ -79,6 +79,13 @@ const QRScannerScreen: React.FC = () => {
setIsScannedDataBoxVisible(false);
});
};
const clearSelectedQrCodeData = () => {
console.log("!!!!!clearSelectedQrCodeData");
setQRCodeId(null);
hideScannedDataBox();
setScanned(false); // Reset the scanned state so the camera can scan again
clearScanData(); // Call the clearScanData passed from App.tsx
};
// Show an offline banner
const showBanner = () => {
@@ -176,10 +183,11 @@ const QRScannerScreen: React.FC = () => {
<Camera
style={StyleSheet.absoluteFill}
device={device}
isActive={!isSettingsModalVisible} // Disable the camera when settings modal is open
isActive={!isSettingsModalVisible && !isScannedDataBoxVisible} // Disable the camera when settings modal or ScannedDataBox is open
torch={enableTorch ? 'on' : 'off'}
codeScanner={codeScanner}
/>
)}
{/* Torch Button */}
@@ -210,24 +218,26 @@ const QRScannerScreen: React.FC = () => {
</View>
{/* Scanned Data Box as a modal with sliding animation */}
<Modal
<Modal
transparent={true}
visible={isScannedDataBoxVisible}
animationType="none"
onRequestClose={hideScannedDataBox}
onRequestClose={clearSelectedQrCodeData} // Call clearSelectedQrCodeData when the modal is requested to close
>
<TouchableOpacity
style={styles.modalOverlay}
activeOpacity={1}
onPress={clearSelectedQrCodeData} // Call clearSelectedQrCodeData on press
>
<TouchableOpacity style={styles.modalOverlay} activeOpacity={1} onPress={hideScannedDataBox}>
<Animated.View style={[styles.modalContainer, { transform: [{ translateY: scannedDataBoxY }] }]}>
<ScannedDataBox
qrCodeId={qrCodeId!}
clearScanData={() => {
setScanned(false);
hideScannedDataBox();
}}
clearScanData={clearSelectedQrCodeData} // Close modal and reset the scanned state
/>
</Animated.View>
</TouchableOpacity>
</Modal>
</Modal>
{/* Settings Icon */}
<TouchableOpacity onPress={() => setIsSettingsModalVisible(true)} style={styles.settingsButton}>